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

Question

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

在本例中，我为 muiTheme 使用 #4275c7 的 Primary1Color - 并且主按钮文本显示为黑色。考虑到这种原色，白色文本看起来会更好并且更容易阅读。

我已经尝试过设置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],
    },
  },

这会找到与您选择的原色形成最佳对比的颜色。如果您不希望这样做，您可以创建一个包装 Button 的自定义组件并覆盖您从其CSS API中选择的类。