Как использовать темную тему для раздела экрана - PullRequest
Новая
       8

Как использовать темную тему для раздела экрана

1 голос
/ 25 марта 2019

У меня есть приложение для пользовательского интерфейса материалов и реагирования, и я решил использовать светлую область содержимого (с черным текстом на белом фоне) и темное меню (белый текст на черном фоне).

Я знаю, что пользовательский интерфейс материала поддерживает настройки темы «из коробки» («светлая» и «темная»), но я не мог понять, как использовать их только для определенной части экрана (только для меню).

Не могли бы вы помочь мне с этим?

(Потому что я знаю, что я могу все стилизовать с помощью CSS, но мне интересно, есть ли более простой способ сделать это.)

1 Ответ

2 голосов
/ 25 марта 2019

Вы можете иметь любое количество MuiThemeProvider элементов, которое вам нужно в вашей иерархии элементов. Таким образом, вы можете иметь такую ​​структуру: 

const mainTheme = createMuiTheme({
  palette: {
    type: "light"
  }
});

const darkTheme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

function App(props) {
  return (
    <MuiThemeProvider theme={mainTheme}>

        <MuiThemeProvider theme={darkTheme}>
          <YourMenu/>
        </MuiThemeProvider>
        <YourContent/>
    </MuiThemeProvider>
  );
}

Вот рабочий пример:

https://codesandbox.io/s/61z38zjr7w

Пример представляет собой модифицированную версию демонстрации постоянного ящика:

https://material -ui.com / демки / ящики / # перманентного ящик

...