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

Question

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

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

我已经尝试设置调色板。primaryColor/primaryTextColor、button.primaryTextColor 和 raisedButton.textColor/primaryColor/primaryTextColor。 None 其中驱动按钮文本着色。是否有明显的属性我遗漏了，或者是否需要不同类型的配置？

作为参考，这是我当前的 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 和 override the classes of your choosing from its CSS API.

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

How do I set the text color of primary raised buttons for React Material UI?

styling

palette

reactjs

material-ui