如何为React Material UI设置主要凸起按钮的文本颜色？

Question

我已经能够通过传递自定义muiTheme属性来自定义Material-UI的许多颜色和间距相关属性，但似乎没有与任何按钮的文本颜色相对应的调色板元素具体国家。

在这种情况下，我使用＃4275c7的primary1Color作为muiTheme - 并且主按钮文本显示为黑色。鉴于这种原色，白色文本看起来更好，更具可读性。

我已经尝试过设置palette.primaryColor / primaryTextColor，button.primaryTextColor和raisedButton.textColor / primaryColor / primaryTextColor。他们都没有驾驶按钮文字着色。是否存在我缺少的明显属性，或者是否需要不同类型的配置？

供参考，这是我目前的muiTheme宣言：

export const muiTheme = getMuiTheme({
  fontFamily: 'Roboto, sans-serif',
  borderRadius: 2,
  spacing: {
    iconSize: 24,
    desktopGutter: 24,
    desktopGutterMore: 32,
    desktopGutterLess: 16,
    desktopGutterMini: 8,
    desktopKeylineIncrement: 64,
    desktopDropDownMenuItemHeight: 32,
    desktopDropDownMenuFontSize: 15,
    desktopDrawerMenuItemHeight: 48,
    desktopSubheaderHeight: 48,
    desktopToolbarHeight: 56
  },
  palette: {
    primary1Color: '#4275c7',
    primaryTextColor: MaterialColors.white,
    primaryColor: MaterialColors.white,
    primary2Color: MaterialColors.cyan700,
    primary3Color: MaterialColors.grey400,
    accent1Color: MaterialColors.pinkA200,
    accent2Color: MaterialColors.grey100,
    accent3Color: MaterialColors.grey500,
    textColor: MaterialColors.darkBlack,
    secondaryTextColor: (0, MaterialColorManipulator.fade)(MaterialColors.darkBlack, 0.54),
    alternateTextColor: MaterialColors.white,
    canvasColor: MaterialColors.white,
    borderColor: MaterialColors.grey300,
    disabledColor: (0, MaterialColorManipulator.fade)(MaterialColors.darkBlack, 0.3),
    pickerHeaderColor: MaterialColors.cyan500,
    clockCircleColor: (0, MaterialColorManipulator.fade)(MaterialColors.darkBlack, 0.07),
    shadowColor: MaterialColors.fullBlack
  },
  button: {
    height: 45,
    // primaryTextColor: MaterialColors.white,
  },
  // raisedButton: {
  //   color: MaterialColors.black,
  //   textColor: MaterialColors.white,
  //   primaryColor: MaterialColors.black,
  //   primaryTextColor: MaterialColors.white,
  // },
});

这是一个示例凸起的主按钮：

Answer 1

您使用的是v1吗？如果是这样，主要按钮的文本颜色使用 theme.palette.getContrastText 在组件的样式表中定义：

  raisedPrimary: {
    color: theme.palette.getContrastText(theme.palette.primary[500]),
    backgroundColor: theme.palette.primary[500],
    '&:hover': {
      backgroundColor: theme.palette.primary[700],
    },
  },

这会找到与您选择的原色最佳对比的颜色。如果您不想这样做，可以创建一个自定义组件，从override the classes创建自己选择的Button和CSS API。