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

Question

我对Material UI还比较陌生，现在我想设置一个像这样的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"/>

但文本颜色没有变化 :/

我是不是错误地应用了主题？

- Tim

---

你使用的方法在这里对我来说很有效：https://codesandbox.io/s/white-text-qyli3 - Ryan Cogswell

嗯，我的大程序里肯定有些东西我漏掉了。谢谢！ - Tim

Answer 1

虽然你的方法在this sandbox中运作良好，但这不是我推荐的方法。对于这样的自定义，我建议使用下面所示的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 UI显著增强了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>
  );
}

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

- Ryan Cogswell

Answer 2

如果您想为所有的排版元素设置默认颜色，但不想为其他 Material UI 元素设置默认颜色，您可以尝试以下方法：

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

- PrzemKon

---

这就是答案！谢谢！！ - Thomas Clayson

我没在主题浏览器中看到这个。你是怎样发现它的？ （Translated: "I didn't see this in the theme explorer. How did you find it?") - papiro

这对我没用。还有其他人成功了吗？ - Evan

在 MUI v5 中，createMuiTheme 被重命名为 createTheme。 - NearHuscarl

那对于V5也适用。谢谢。 - Khasky

这在v5中对我起作用了。巨大的时间节省，找不到它在文档中。 - shredGnar

Answer 3

Typography 的 color 属性是主题感知的属性，这是 sx 属性的一个不错的特性。这意味着除了像这样通常设置 color 之外：

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

您可以引用主题颜色，无论是来自默认色盘还是像下面定义的自定义色盘：

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

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

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

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

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

- NearHuscarl

Answer 4

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

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

对于 MUI 5，请使用 sx 属性。

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

- Smack Alpha

Answer 5

在Material UI中设置文字颜色和字体样式

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

- Soma sundara

Answer 6

我会尝试这样做 - 在您的主题中添加一个typography属性，类似以下带有'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" 中获取。您不需要单独传递 'color' 属性给 Typography。

要查看此功能的工作实现，您可以检查我的 这个 Repo，其中我将所有的 Typography 变量都保存在一个名为 globalTheme.js 的单个全局文件中，并在 App.js 中将所有其他组件包装在 MuiThemeProvider 中，如下所示。

<MuiThemeProvider theme={globalTheme}>

因此，项目中的所有排版组件都可以访问我在globalTheme.js文件中声明的变体。

- Rohan_Paul

---

不行 - 我正在使用4.9版本的材料，所以 MuiThemeProvider -> ThemeProvider，并且没有 useNextVariants，但是从我所看到的情况来看，主题根本没有被应用。当我使用 typography: {h3: {color: "#FFFFFF"}} 时，文本颜色也没有改变。 - Tim

我绝对不建议这样做。Material UI明确将调色板（颜色）与排版（字体定义）分开。我认为您不想通过在排版定义中定义颜色来混淆它们。 - Javid Jamae

Answer 7

首先，您需要为文本元素定义替代颜色。

text: {
  primary: 'rgba(60, 72, 88, 1)',
  secondary: 'rgba(132, 146, 166, 1)',
  disabled: 'rgba(60, 72, 88, 0.38)',
  hint: 'rgba(60, 72, 88, 0.38)',
}

然后，您可以执行以下操作：

<Typography variant="h1">Lorem ipsum</Typography> // Default text color
<Typography variant="subtitle1" color="textSecondary">dolor sit amet</Typography> // Secondary text color.
<Typography variant="body1" color="secondary">consectetur adipiscing elit</Typography> // Global secondary color.

- Burak Özdemir

---

如何让禁用颜色起作用？<Typography variant="body1" color="textDisabled">示例</Typography>对我没有效果。 - Michał Wanat

我找到了解决方案：文本：{ primary: 'rgba(0, 0, 0, 1)', secondary: 'rgba(0, 0, 0, 0.6)', }, textDisabled: 'rgba(0, 0, 0, 0.3)', - Michał Wanat

Answer 8

你可以尝试使用Material-UI Core中的样式来创建自定义外观，其中可以包括下面示例中显示的文本颜色。

import {makeStyles} from '@material-ui/core/styles'

const useStyles=makeStyles((theme)=>({
text:{
    color:"#ffffff"
}
}));

const classes=useStyles();
<Typography align="center" className={classes.text}>This text should be white</Typography>

- Andrew Karanja

Answer 9

对于那些仍在使用v4版本、使用typescript并希望拥有类型安全定义的人，可以像这样扩展mui的Typography：

import React, { FC } from "react";
import { createStyles, makeStyles, Theme } from "@material-ui/core";
import MuiTypography, { TypographyProps } from "@material-ui/core/Typography";
import clsx from "clsx";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    warning: {
      color: theme.palette.warning.main,
    },
    success: {
      color: theme.palette.success.main,
    },
  })
);

type AdditionalColorKeys = keyof ReturnType<typeof useStyles>;

export type TypographyWithSpacingProps = Omit<TypographyProps, "color"> & {
  color?: AdditionalColorKeys | TypographyProps["color"];
};

export const Typography: FC<TypographyWithSpacingProps> = ({ color, className, ...props }) => {
  const classes = useStyles();
  let colorClass = "";

  if (color && color in classes) {
    colorClass = classes[color as keyof ReturnType<typeof useStyles>];
  }

  return <MuiTypography {...props} className={clsx(className, colorClass)} />;
};

- Ruslan Zaytsev

Answer 10

您还可以通过添加系统属性'sx'来更改排版的颜色，就像这样

<Typography
      variant="h6"
      sx={{
          color: "white",
         }}
>

- Jon Snow