Material UI: Unable to change button text color in theme

问题

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>
);

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

Anybody got any ideas?

回答1:

Solved it! This finally did the trick:

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.

回答2:

This worked for me. The color we chose decided to have a dark button contrast color but white as contrast color looks arguably better:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#46AD8D",
      contrastText: "white" //button text white instead of black
    },
    background: {
      default: "#394764"
    }
  }
});

回答3:

From https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js#L200 you can see what can be set in the theme for various components, and on raisedButton you will see that color is the actually the button background and to set the text colour you will need to change textColor property instead.

const theme = getMuiTheme({
  raisedButton: {
    textColor: '#ffffff', // this should work
    primaryTextColor: '#ffffff' // or this if using `primary` style
  }
});

Its not exactly intuitive given that CSS color affects text rather than background, and it doesn't even match up with the properties for the component itself http://www.material-ui.com/#/components/raised-button which have props for backgroundColor and labelColor instead!!!

来源：https://stackoverflow.com/questions/47813481/material-ui-unable-to-change-button-text-color-in-theme

标签

button

colors

themes

material-ui