在 Material UI 中设置排版文本颜色

Question

我对 Material UI 很陌生，我正在尝试使用这样的文本颜色设置排版：

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如下所示（对于 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 中，Material-UIcolor显着增强了prop（对于所有具有colorprop 的组件）以支持主题调色板中的任何颜色，因此对于白色，您可以使用common.white：

import React from "react";
import Typography from "@material-ui/core/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>
  );
}

相关答案：你能在 Material UI 中添加额外的颜色吗？

Answer 2

如果您想为所有 Typography 元素设置默认颜色，但不想为其他 Material UI 元素设置默认颜色，您可以尝试以下操作：

const theme = createMuiTheme({
  typography: {
    allVariants: {
      color: "pink"
    },
  },
});

Answer 3

color的 prop是Typography主题感知的，这是sxprop的一个很好的功能。这意味着除了像往常一样设置之外color：

<Typography variant="h1" color="#00ff00">

您可以从默认调色板或定义如下的自定义调色板中引用主题颜色：

const theme = createTheme({
  palette: {
    tomato: '#FF6347',
    pink: {
      deep: '#FF1493',
      hot: '#FF69B4',
      medium: '#C71585',
      pale: '#DB7093',
      light: '#FFB6C1',
    },
  },
});

theme在 中注册自定义后ThemeProvider，可以Typography通过将对象的字符串路径指定Palette为颜色值来使用它：

<Typography color="tomato">text</Typography>
<Typography color="pink.deep">text</Typography>
<Typography color="pink.hot">text</Typography>
<Typography color="pink.medium">text</Typography>
<Typography color="pink.pale">text</Typography>
<Typography color="pink.light">text</Typography>

Typograhy以下是使用调色板中默认颜色的几个示例：

<Typography color="primary.main">text</Typography>
<Typography color="primary.dark">text</Typography>
<Typography color="primary.light">text</Typography>
<Typography color="secondary">text</Typography>
<Typography color="text.secondary">text</Typography>
<Typography color="text.disabled">text</Typography>

Answer 4

如果您不想使用任何主题。您也可以通过属性来设置它style。

<Typography style={{color:"#00adb5"}}  variant="h3" >My Text</Typography>

对于 MUI 5，使用sx属性，

<Typography sx={{ color: "#00adb5" }} variant="h3">
   My Text
</Typography>

Answer 5

在 Material UI 中设置版式文本颜色

<Typography gutterBottom variant="h9" component="h2" color="secondary">
    {card.unitNumberList}
</Typography>

Answer 6

我会尝试这个 - 在您的主题中包含一个排版属性，如下所示，带有“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"
    }
  }
});

那么你的版式的颜色应该直接来自你刚刚在主题内声明的variant =“h3”。您不需要单独将“颜色”道具传递给 Typgraphy

对于此功能的有效实现，您可以检查我的这个 Repo，其中我将所有 Typography 变体保存在一个名为globalTheme.js的中央全局文件中，并在 App.js 中将所有其他组件包装在 MuiThemeProvider 中，如下所示

<MuiThemeProvider theme={globalTheme}>

因此，项目中任何位置的所有 Typography 组件都可以访问我在 globalTheme.js 文件中声明的变体。