Как переключаться между основной, светлой и темной дисперсиями палитры Material-UI - PullRequest
Новая
       8

Как переключаться между основной, светлой и темной дисперсиями палитры Material-UI

0 голосов
/ 22 мая 2018

Предполагается, что я использую палитру Material-UI следующим образом: 

  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"
    }
  },

И скажем, что я использую ряд компонентов Material-UI, таких как <AppBar />, <Button /> и т. Д.и каждому из них я хочу дать им разные акценты основного объекта палитры - напр.<AppBar /> будет primary.main и <Button /> будет primary.light.

Как я могу это сделать?

Использование чего-то вроде <AppBar position="static" color="primary.light"> не работает и выдает ошибку.

Ответы [ 3 ]

0 голосов
/ 09 сентября 2018

К сожалению, документы неясны.Вот единственный хакерский обходной путь, который я нашел: 

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

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

Эта библиотека запутанная ... по крайней мере, она соответствует React!

0 голосов
/ 09 сентября 2018

  1. Вы не можете установить color prop в "primary.light".Ошибка, о которой вы упомянули, говорит о том, что color prop ожидает одно из ["default","inherit","primary","secondary"]. Для достижения желаемой окраски для ваших <AppBar /> и <Button /> вы можете применить несколько стилей: 

    style={{ backgroundColor: theme.palette.primary.main }}

  2. Чтобы изменить саму палитру, вы можете отслеживать activePalette в вашем redux хранилище или состоянии компонентов.Вот простой пример использования состояния: 

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' />
0 голосов
/ 23 мая 2018

Вы можете перезаписать, какой будет цвет «по умолчанию» (или любой другой), скажем, AppBar с вашей темой: 

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

Это действительно помогает перейти к документации -> API компонентов ->реализация компонента.Там вы сможете увидеть, как настраивается компонент и что можно изменить / изменить с помощью темы / стилей и т. Д.

...