材质用户界面:无法更改主题中的按钮文本颜色 [英] Material UI: Unable to change button text color in theme

问题描述

我在直接在Material UI主题中更改按钮文本颜色时遇到问题.更改原色+按钮字体大小可以很好地工作，因此问题不在于传递主题.这是我的代码:

I'm having a problem with changing button text color directly in the Material UI theme. Changing primary color + button font size works fine, so the problem isn't in passing the theme on. Here's my code:

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，但这也没有效果.

I also tried using an imported color instead of the #ffffff, but that had no effect either.

有人有什么主意吗?

推荐答案

解决了！终于成功了:

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

因此，您只需要使用替代"，并明确说明要更改的组件的确切类型.

So, you just have to use "overrides" and be explicit about the exact type of component you want to change.

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