如何在material-ui中分别设置凸起按钮，平面按钮的主题答案

【问题标题】：how to theme raised button, flat button separately in material-ui如何在material-ui中分别设置凸起按钮，平面按钮的主题
【发布时间】：2017-03-22 05:54:09
【问题描述】：

我正在尝试使用 react 在材质 ui 中创建自定义主题。

palette: {
primary1Color: pink500,
primary2Color: pink500,
primary3Color: grey300,
accent1Color: grey500,
accent2Color: grey500,
accent3Color: grey300,
textColor: darkBlack,
alternateTextColor: white,
canvasColor: white,
borderColor: grey300,
disabledColor: fade(grey700, point3),
pickerHeaderColor: cyan500,
clockCircleColor: fade(darkBlack, point7),
shadowColor: fullBlack

}

托盘是这样的。 flatbuttons 工作正常，但凸起的按钮以 accent1Color: gray500 作为背景。这是我不想要的，同时我也不想使用像“labelStyle”和“backgroundColor”这样的道具来覆盖。有没有其他方法可以专门创建一个主题选项，我只需要添加 secondary={true} ，它将 backgroundColor 设为 gray50 并将 labelStyle 设为 gray900。

任何帮助将不胜感激。希望得到一些帮助。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你可以创建这样的东西。您可以使用此方法覆盖每个组件使用的颜色。请注意，我在所有地方都使用了primary1Color 作为示例。

const palette = {
  primary1Color: '#ffc20e',
  primary2Color: '#e30413'
}

const theme = {
  palette: palette,
  raisedButton: {
    color: palette.primary1Color,
    textColor: palette.primary1Color,
    primaryColor: palette.primary1Color,
    primaryTextColor: palette.primary1Color,
    secondaryColor: palette.primary1Color,
    secondaryTextColor: palette.primary1Color,
    disabledColor: palette.primary1Color,
    disabledTextColor: palette.primary1Color,
  }
}

<MuiThemeProvider muiTheme={getMuiTheme(theme)}>
    <div className='appContainer'>
       {children}
    </div>
</MuiThemeProvider>

【讨论】：