在MUI中设置排版文本颜色 [英] Set Typography text color in MUI

问题描述

我对MUI非常陌生，我正在尝试使用如下文本颜色设置Typography：

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"/>

但文本不会更改颜色：/

我是否应用了错误的主题？

推荐答案

虽然您的方法在this sandbox中运行良好，但我不推荐使用这种方法。对于这样的自定义，我建议使用如下所示的withStyles，而不是嵌套主题(更下面的v4 of Material-UI--v5示例)。

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>
  );
}

---

在v5中，MUI显著增强了color道具(对于所有具有color道具的组件)，以支持主题调色板中的任何颜色，因此对于白色，您可以使用common.white：

import React from "react";
import Typography from "@mui/material/Typography";

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

相关答案：Can you add an additional color in Material UI?

这篇关于在MUI中设置排版文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！