Материал-интерфейс не меняет цвет типографии в соответствии с темой

Question

Я пробую Material-UI, поэтому я создал две темы:

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

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

Но когда я использую Typography компонент, его свойство цвета не меняется. Более того - цвет унаследован от html, поэтому Typography не знает о текущей теме. Есть ли способ настроить цвет шрифта при создании темы или использовать по умолчанию? Я пытался поместить color реквизит в поддон объект так:

const darkTheme = createMuiTheme({
  palette: {
    type: "dark",
    typography: {
       body1: {
           color: '#fff'
       }
    }

  }
});

Но не повезло. Я создал codepen . И там я обнаружил, что если я понижаю material-ui до 3.1, он работает нормально - класс .MuiTypography-body1 устанавливает свойство цвета, соответствующее теме.

Answer 1

Поведение по умолчанию для Typography - ничего не делать с цветом. Причина этого заключается в том, что обычно цвет контролируется тем же компонентом, который контролирует цвет фона. Например, если вы поместите элемент Typography в элемент Paper, Paper будет управлять как background-color, так и color. Чтобы элементы html и body соответствовали вашей теме, вам необходимо использовать CssBaseline.

Typography, обеспечивающий color реквизит для явного управления цветом. При использовании color="textPrimary" будет установить цвет шрифта таким же образом, как CssBaseline устанавливает цвет для элемента тела .

Ниже приведен рабочий пример, демонстрирующий поведение:

import React from "react";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import CssBaseline from "@material-ui/core/CssBaseline";
import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";

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

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

export default function App() {
  const [topLevelDark, setTopLevelDark] = React.useState(false);
  return (
    <MuiThemeProvider theme={topLevelDark ? darkTheme : lightTheme}>
      <CssBaseline />
      <Button
        variant="contained"
        color="primary"
        onClick={() => {
          setTopLevelDark(!topLevelDark);
        }}
      >
        Toggle Themes
      </Button>
      <div>
        <Typography variant="body1">I'm within the top-level theme</Typography>
        <MuiThemeProvider theme={topLevelDark ? lightTheme : darkTheme}>
          <Paper>
            <Typography variant="body1">
              I'm in a Paper within the nested theme
            </Typography>
          </Paper>
          <Typography variant="body1" color="textPrimary">
            I'm in the nested theme with textPrimary color, but outside of a
            Paper. This makes me hard to read since nothing is setting the
            background-color to something contrasting.
          </Typography>
          <Typography variant="body1">
            I'm in the nested theme outside of a Paper with no explicit color.
          </Typography>
        </MuiThemeProvider>
      </div>
    </MuiThemeProvider>
  );
}

---

Примечание об использовании нескольких тем

в вашем коде Пример песочницы, у вас было два родственных элемента ThemeProvider, но при использовании вашей собственной пользовательской темы важно, чтобы ваша пользовательская тема была на верхнем уровне. Если вы используете другую тему для части страницы, она должна быть вложена в вашу тему верхнего уровня. Если у вас есть два элемента ThemeProvider верхнего уровня (т.е. ни один из них не вложен в другой), они оба будут пытаться влиять на глобальные имена классов Material-UI CSS. Это означает, что победит только один из них, а другой, похоже, не будет работать вообще. Когда Material-UI обнаружит, что вы находитесь во вложенном ThemeProvider, он будет использовать разные (с суффиксом) имена классов во вложенной теме, и вложенная тема будет работать как положено.

Связанные ответы:

• Изменить root цвет фона с темой Material-UI