Question

使用下面的代码（Entire Code is found here），它允许我设置MaterialUI中提供的所有组件的样式。但是，有些情况下我需要使用相同组件的2种不同样式。例如，AppBar在应用程序中可能是绿色的，而对话框或抽屉中的AppBar可能是不同的颜色。我怎样才能做到这一点？如果我将一个类附加到我的“不同”AppBar，我可以使用此代码中的类来指定其样式吗？语法如何工作？

基本上，我希望这两个AppBar以不同的方式显示。即1个红色和1个绿色

//no class needed on this one because it displays the default AppBar colors
<AppBar 
    title="Hulk"
/>

//A class here to identify it and modify it
<AppBar 
    className="red-header"
    title="Ironman"
/>

目前，我正在使用一个类并用CSS覆盖！important。我不想那样做。

export default function getMuiTheme(muiTheme, ...more) {
  muiTheme = merge({
      zIndex,
      isRtl: false,
      userAgent: undefined,
  }, lightBaseTheme, muiTheme, ...more);

  const {spacing, fontFamily, palette} = muiTheme;
  const baseTheme = {spacing, fontFamily, palette};

  muiTheme = merge({
    appBar: {
      color: palette.primary1Color,
      textColor: palette.alternateTextColor,
      height: spacing.desktopKeylineIncrement,
    }
}, muiTheme, {
    baseTheme, // To provide backward compatibility.
    rawTheme: baseTheme, // To provide backward compatibility.
});

提前致谢

Answer 1

对于v0.x AppBar，您可以使用style道具覆盖根元素的内联样式，在本例中为Paper。您只需提供backgroundColor。

如果你想要使用主题，你可以嵌套多个主题：

const Main = () => (
  <MuiThemeProvider muiTheme={myMuiTheme1}>
    <AppBar title="My AppBar 1" />
      <MuiThemeProvider muiTheme={myMuiTheme2}>
        <AppBar title="My AppBar 2" />
      </MuiThemeProvider>
  </MuiThemeProvider>
);

在MuiTheme

1 个答案: