Question

我正在尝试使用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

}

托盘就是这样的。扁平按钮工作正常，但凸起的按钮采用accent1Color：grey500作为背景。我不想要的，同时我也不想使用像＆＃34; labelStyle＆＃34;和＆＃34; backgroundColor＆＃34;覆盖。有没有其他方法专门创建一个主题选项，我只需要添加secondary = {true}，它将backgroundColor作为grey50，labelStyle作为grey900。

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

Answer 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>

如何主题凸起按钮，平面按钮分别在材料-ui

1 个答案: