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

Question

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

在这种情况下，我为 muiTheme 使用了 #4275c7 的 primary1Color - 主按钮文本显示为黑色。鉴于这种原色，白色文本会更好看，也更易读。

我已经尝试过设置 palette.primaryColor/primaryTextColor、button.primaryTextColor 和 raiseButton.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],
    },
  },

这会找到与您选择的原色形成最佳对比的颜色。如果您不希望这样，您可以创建一个自定义组件，该组件包含您从 CSS API 中选择的 Button 和 override the classes。