Задать цвет текста типографии в пользовательском интерфейсе материала

Question

Я довольно новичок в пользовательском интерфейсе материалов и пытаюсь установить типографику с цветом текста следующим образом:

const theme = createMuiTheme({
  palette: {
    text:{
      primary: "#FFFFFF"
    }
  }
});

const WhiteText = (props: { text:string, varient: Variant | 'inherit'}) => {
  return <ThemeProvider theme={theme}>
      <Typography variant={props.varient} align="center" color="textPrimary">{props.text}</Typography>
  </ThemeProvider>
}
...
<WhiteText varient="h3" text="This text should be white"/>

, но текст не изменит цвет: /

Я неправильно применяю тему?

Answer 1

Хотя ваш подход прекрасно работает в этой песочнице , я бы не рекомендовал этот подход. Вместо вложенных тем для подобных настроек я бы рекомендовал использовать withStyles, как показано ниже.

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";

const WhiteTextTypography = withStyles({
  root: {
    color: "#FFFFFF"
  }
})(Typography);

export default function App() {
  return (
    <div className="App" style={{ backgroundColor: "black" }}>
      <WhiteTextTypography variant="h3">
        This text should be white
      </WhiteTextTypography>
    </div>
  );
}

Answer 2

Я бы попробовал это - включить свойство типографии в вашу тему, что-то вроде ниже, с вариантом 'h3'.

const theme = createMuiTheme({
  palette: {
    text: {
      primary: "#FFFFFF"
    }
  },

  typography: {
    useNextVariants: true,
    fontFamily: "Montserrat",
    h3: {
      fontSize: 33,
      fontFamily: "Montserrat",
      fontWeight: 300,
      color: "#2882F8",
      letterSpacing: "0.0075em",
      verticalAlign: "middle",
      alignItems: "center",
      textAlign: "center"
    }
  }
});

Тогда цвет вашей типографии должен исходить непосредственно из варианта = "h3 «Вы только что объявили внутри темы. Вам не нужно отдельно передавать «цветные» реквизиты типографии

. Для рабочих реализаций этого вы можете проверить этого репо моего, где я храню все мои варианты Typography в одном центральном глобальном файле с именем globalTheme. js и в приложении. js, оборачивая все остальные компоненты в MuiThemeProvider, как показано ниже

<MuiThemeProvider theme={globalTheme}>

Таким образом, все компоненты Typography в любом месте проекта будут иметь доступ к вариантам, которые я объявил в этом файле globalTheme. js.