Блог

Я еще не очень глубоко в React…

Панель приложений оформлена в виде кнопки, которая мне не нравится.

Итак, я хочу изменить ее цвета, но также заставить ее работать, переключая светлую и темную схему.

[Редактировать] Я хочу определить собственные цвета для панели приложений (без изменения существующих цветов) и добавить их в светлую / темную тему соответственно, чтобы она автоматически менялась на светлую / темную при переключении тем. [/ Править]

Изменение цветов с помощью ThemeProvider уже не работает:

 const theme = createMuiTheme({
    palette: {
        // type: 'dark'
    },
    overrides: {
        MuiTypography: {
            h1: {
                fontSize: 24,
                fontWeight: "normal"
            },
            h2: {
                fontSize: 22,
                fontWeight: "normal"
            },
        },
        MuiAppBar: {
            background: 'white',
            borderBottom: "1px solid lightGray",
        }
    },
  

Однако MuiTypography работает.
(Как я вижу здесь https://material-ui.com/customization/default-theme / в панели приложений нет только типографики.)

Как я могу указать AppBar использовать другие цвета, кроме основного / дополнительного, оставаясь синхронизированным со встроенным механизмом light-dark-theme?

Чао, если вы хотите переключить тему (например, с темной темы на светлую), вы могли бы использовать primary и secondary цвета (ранее определенные в theme object).

Итак, давайте возьмем этот пример codesandbox, который я сделал:

1. Я определил 2 цвета в теме:

    const Theme = {
     palette: {
       primary: {
         main: "#000000"
       },
       secondary: {
         main: "#FFFFFF"
       }
     }
   };
     

В данном случае primary это наша темная тема, а secondary — светлая.

2. Я создал тему MUI:

    const theme = createMuiTheme(Theme);
     

3. Я завернул AppBar компонент в ThemeProvider с theme созданным:

    <ThemeProvider theme={theme}>
     <AppBar position="static" color={themeSelected}>
     ....
     </AppBar>
   </ThemeProvider>
     

Как вы можете видеть на AppBar компоненте, я ввел переменную состояния в color props ( themeSelected ).

Что ж, теперь я создал простую тему IconButton со SwapHoriz значком , и по щелчку я меняю переменную состояния themeSelected :

 ...

const [themeSelected, setThemeSelected] = useState("primary"); // init as primary color

...

const changeTheme = () => {  // function to set state
   if (themeSelected === "primary") setThemeSelected("secondary");
   else setThemeSelected("primary");
};

...

<IconButton   //icon button with onClick handler
   className={classes.menuButton}
   color="inherit"
   aria-label="open drawer"
   onClick={() => {
      changeTheme();
   }}
>
   <SwapHoriz />
</IconButton>
  

Вот и все. Теперь, если вы нажмете SwapHoriz , вы можете изменить цветовую тему:

Основная цветовая тема

Вторичная цветовая тема

Редактировать

После вашего объяснения я понял, что вам нужны разные цвета для панели приложений, и при смене темы панель приложений должна принимать эти цвета.

В этом случае единственный известный мне способ — переопределить classes AppBar таким образом:

 <AppBar
   position="static"
   color={themeSelected}
   classes={{
      colorPrimary: classes.appbarpalette,
      colorSecondary: classes.appbarpalette
   }}
>
  

Затем в вашем makeStyles :

 ...
appbarpalette: {
    "amp;.MuiAppBar-colorPrimary": {
      backgroundColor: purple[600] // instead of #000000 for primary now you have purple
    },
    "amp;.MuiAppBar-colorSecondary": {
      backgroundColor: green[600] // instead of #FFFFFF for secondary now you have green
    }
  }
  

Я обновил свой пример codesandbox.