MUI-更改主题中的按钮文本颜色 [英] MUI - Change Button text color in theme

问题描述

在MUI主题中直接更改按钮文本颜色时遇到问题。更改原色+按钮字体大小可以很好地工作，所以问题不在于传递主题。以下是我的代码：

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import { lightBlue } from 'material-ui/colors';
import styled from 'styled-components';

const theme = createMuiTheme({
  palette: {
    primary: lightBlue, // works
  },
  raisedButton: {
    color: '#ffffff', // doesn't work
  },
  typography: {
    button: {
      fontSize: 20, // works
      color: '#ffffff' // doesn't work
    }
  }
});

const App = ({ user, pathname, onToggleDrawer }) => (
  <MuiThemeProvider theme={theme}>
    ...
  </MuiThemeProvider>
);

我还尝试使用导入的颜色代替#ffffff，但也没有效果。

有人有什么主意吗？

推荐答案

已解决！这终于奏效了：

const theme = createMuiTheme({
  palette: {
    primary: lightBlue,
  },
  overrides: {
    MuiButton: {
      raisedPrimary: {
        color: 'white',
      },
    },
  }
});

因此，您只需使用"重写"并明确说明要更改的确切组件类型。

这篇关于MUI-更改主题中的按钮文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！