Блог

Главная - Вопросы по программированию - Создавая тему MUI v5, как я могу переопределить цвета дочерних компонентов панели приложений?

Создавая тему MUI v5, как я могу переопределить цвета дочерних компонентов панели приложений?

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

Я использовал этот инструмент для создания темы пользовательского интерфейса, чтобы создать тему MUI, которая мне нравится: mui-theme-creator

Я полагаю, что этот инструмент использует Material UI версии 4, в то время как в моем проекте я использую @mui / material версии 5.2.1, и я пытаюсь выяснить, как я могу «преобразовать» код из создателя темы в версию, совместимую с версией 5.

Теперь, вот код темы от создателя темы:

 import { ThemeOptions } from '@material-ui/core/styles/createMuiTheme'
export const themeOptions: ThemeOptions = {
  palette: {
    type: 'dark',
    primary: {
      main: '#ff3d00',
    },
    secondary: {
      main: '#2962ff',
    },
  ...........
  props: { // Is there a way to do anything like this with Mui v5?
    MuiAppBar: {
      color: 'inherit',
    },
  },
  overrides: {
    MuiAppBar: {
      colorInherit: {
        backgroundColor: '#303030',
        color: '#fff',
      },
    },
  },
};

Скриншот панели приложений с использованием приведенного выше кода ThemeOptions

Теперь, когда я сделал все возможное, чтобы попытаться преобразовать этот код в v5 и воспроизвести его эффекты, у меня возникла одна главная проблема. Это соответствующий код, который у меня есть до сих пор:

 import { createTheme } from '@mui/material/styles'
export const theme = createTheme({
  mode: 'dark',
  palette: {
    primary: {
      main: '#ff3d00',
    },
    secondary: {
      main: '#2962ff',
    },
  ..............
  components: {
    MuiAppBar: {
      styleOverrides: {
        colorPrimary: {
          backgroundColor: '#303030',
          color: '#ffffff',
        },
      },
    },
  },
})

Основная проблема, с которой я сталкиваюсь, заключается в том, что, хотя панель приложений меняет цвет фона, я не могу найти опцию с помощью createTheme, которая изменит цвет дочерних элементов внутри панели приложений.

Если нет способа сделать это, как в версии 4, было бы лучше, если бы я просто создал тему на основе основной темы, которую я уже создал, и использовал ее исключительно для тематизации моего компонента панели навигации?

Комментарии:

1. Реквизиты по умолчанию теперь components недоступны, см. mui.com/customization/theme-components/#default-props и переопределения стиля по — прежнему предоставляют a colorInherit для AppBar , см. mui.com/api/app-bar/#css

2. когда я переходил на mui версии 5, мне снова пришлось переопределить панель приложений

3. @JacobSmit спасибо за этот совет, установка color=»inherit» для дочерних элементов внутри моей панели приложений работала отлично, большое вам спасибо!

Ответ №1:

В вашем перенесенном стиле отсутствуют реквизиты, в MUI5 вы должны предоставить такие реквизиты

 components: {
    MuiAppBar: {
        styleOverrides: {
            colorInherit: {
                backgroundColor: "#32302F",
            },
        },
        defaultProps: {
            color: "inherit",
        },
    },
},

Комментарии:

1. Ах, я вижу, большое вам спасибо, это сводило меня с ума, пытаясь разобраться в этом.

Метки: ,