我对 MUI 很陌生，我正在尝试Typography使用这样的文本颜色设置 a ：
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"/>
但文本不会改变颜色：/
我应用主题错了吗？
尽管您的方法在此沙箱中运行良好，但这不是我推荐的方法。而不是嵌套主题，对于这样的自定义，我建议使用withStyles如下所示（对于 Material-UI 的 v4 - 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 中，MUIcolor显着增强了prop（对于所有具有colorprop 的组件）以支持主题调色板中的任何颜色，因此对于白色，您可以使用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>
);
}
如果您想为所有 Typography 元素设置默认颜色，但不想为其他 Material UI 元素设置默认颜色，您可以尝试以下操作：
const theme = createMuiTheme({
typography: {
allVariants: {
color: "pink"
},
},
});
如果您不想使用任何主题。您也可以通过style属性设置它。
<Typography style={{color:"#00adb5"}} variant="h3" >My Text</Typography>
在 Material UI 中设置排版文本颜色
<Typography gutterBottom variant="h9" component="h2" color="secondary">
{card.unitNumberList}
</Typography>