代码之家 › 专栏 › 技术社区 › James

如何在材质UI调色板的主、亮和暗变化之间切换

material-ui reactjs

James · 技术社区 · 7 年前

  palette: {
    primary: {
      main: "#039be5",
      light: "#63ccff",
      dark: "#C218006db35B",
      contrastText: "#fafafa"
    },
    secondary: {
      main: "#f50057",
      light: "#ff5983",
      dark: "#bb002f",
      contrastText: "#f9fbe7"
    },
    error: {
      main: "#f50057",
      light: "#ff5983",
      dark: "#bb002f",
      contrastText: "#f9fbe7"
    }
  },

假设我正在使用一些重要的UI组件,比如 <AppBar /> , <Button /> ,等等,每一个我想给他们不同的口音的主要调色板对象-例如。 < 将 primary.main 和 < 将 primary.light

我该怎么做?

使用类似于 <AppBar position="static" color="primary.light">

3 回复 | 直到 7 年前

awc737 6 年前

不幸的是,文件还不清楚。这是我发现的唯一一件破烂的作品:

<AppBar position="static" className="primaryLight">

const styles = theme => ({
  primaryLight: {
    backgroundColor: theme.palette.primary.light
  }
}

n1stre 7 年前

你不能设定 color 支持 "primary.light" 道普希望 ["default","inherit","primary","secondary"]. <AppBar /> 和 <Button /> 您可以应用一些样式:
```
style={{ backgroundColor: theme.palette.primary.main }}
```
要更改调色板本身,可以跟踪 activePalette 在你的内心 redux 存储或组件状态。下面是使用state的简单示例:

const {createMuiTheme,MuiThemeProvider,AppBar,Button,Typography} = window['material-ui'];

const THEME = createMuiTheme({
  palette: {
    list: ["primary", "secondary", "error"],
    primary: {
      id: 0,
      main: "#039be5",
      light: "#63ccff",
      dark: "#C21800",
      contrastText: "#fafafa"
    },
    secondary: {
      id: 1,
      main: "#f50057",
      light: "#ff5983",
      dark: "#bb002f",
      contrastText: "#f9fbe7"
    },
    error: {
      id: 2,
      main: "#bb002f",
      light: "#f9fbe7"
    }
  }
});

class App extends React.Component {
  state = {
    activePaletteId: THEME.palette.primary.id
  };

  get activePaletteName() {
    return THEME.palette.list[this.state.activePaletteId];
  }

  get activePalette() {
    return THEME.palette[this.activePaletteName];
  }

  nextPalette = () => {
    this.setState(s => ({
      activePaletteId: ++s.activePaletteId % THEME.palette.list.length
    }));
  };

  render() {
    return (
      <div className="App">
        <AppBar 
          position="static" 
          style={{ 
            textAlign: 'center',
            marginBottom: '20px',
            backgroundColor: this.activePalette.main }}
        >
          <Typography 
            style={{ color: '#fff' }}
            variant="subheading"
          >
            Palette: {this.activePaletteName}
          </Typography>
        </AppBar>
        <Button
          variant="raised"
          onClick={this.nextPalette}
          style={{ backgroundColor: this.activePalette.light }}
        >
          Change palette
        </Button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <MuiThemeProvider theme={THEME}>
   <App />
  </MuiThemeProvider>, 
  rootElement
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.development.js"></script>

<div id='root' />

-2

Max 7 年前

您可以用主题覆盖AppBar的“默认”(或任何其他)颜色:

   overrides:{
    MuiAppBar: {
      colorDefault: {
        backgroundColor: "#fff"
      }
    }
   }