reactjs 自定义主题颜色未在MUI中应用

fcwjkofz 于 2023-01-30 发布在 React

关注(0)|答案(2)|浏览(161)

我有一个使用MUI的主题，但自定义颜色不适用于某些组件。
主题是这样的：

import { createTheme, ThemeProvider } from "@mui/material/styles";

...

const theme = createTheme({
    typography: {
        fontSize: 16,
        fontFamily: [
            "Inter",
            "-apple-system",
            "BlinkMacSystemFont",
        ].join(","),
        h1: {
            fontSize: "2rem",
            fontWeight: 500,
        },
        h2: {
            fontSize: "1.5rem",
            fontWeight: 400,
        },
    },
    palette: {
        primary: {
            main: "#4C5D88",
        },
        secondary: {
            main: "#DBE0EB",
        },
        tertiary: {
            main: "#F8F9FF",
        },
// Added all of the attributes here in case that was the reason it didn't work
        white: {
            light: "#FFFFFF",
            main: "#FFFFFF",
            dark: "#FFFFFF",
            contrastText: "#FFFFFF", 
        },
        error: {
            main: "#FFEED6",
        },
        errorlight: {
            main: "#DBE0EB",
        },
        success: {
            main: "#8EDCA9",
        },
        accent1: {
            main: "#3395E7", // lighter blue
        },
        accent2: {
            main: "#E3F2FF", // darker blue
        },
        accent3: {
            main: "#E86CAF", // pink
        },
    },
});

它使用ThemeProvider进行应用：

<ThemeProvider theme={theme}>
  {/* various components */}
</Theme>

但是，当我尝试做一些基本的事情时，比如ThemeProvider中包含<Typography>的<Grid>组件，自定义颜色不适用：

<Grid
    item
    sx={{
        backgroundImage: "url(...)",
        color: "white", // tried this as an experiment, too
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
    }}
>
    <Typography variant="h1" color="white" gutterBottom>
        This text should be white.
    </Typography>
</Grid>

像primary和secondary这样的颜色工作得很好，但是没有一种自定义颜色可以，而且我在尝试了一些不同的事情（比如检查不同的暗/亮模式等）之后也不知道为什么。
先谢了!

reactjs

来源：https://stackoverflow.com/questions/75266171/custom-theme-colors-not-applying-in-mui

2条答案

按热度按时间

zxlwwiss1#

在这方面有各种办法。
1.您可以在主题对象中立即为使用所需颜色的特定组件创建变体。（我不提供示例，因为它超出了您正在寻找的调色板方法）。
1.您可以使用styled() utility来创建一个使用所需颜色的组件，并将其导入到需要的位置。

import { styled } from "@mui/system";
import Typography from "@mui/material/Typography";

const WhiteTypography = styled(Typography)(({ theme }) => ({
  color: theme.palette.white.main
}));

// Import & use it somewhere
<WhiteTypography variant="h1" gutterBottom>
  This text should be white.
</WhiteTypography>

1.您可以立即在Typography组件中引用主题对象：

import { theme } from "../yourthemepath/theme.js";
...
<Typography
 variant="h1"
 gutterBottom
 color={theme.palette.accent1.main}
>
 This text should be accent1.main.
</Typography>

在这里看到它的工作原理：https://codesandbox.io/s/goofy-williamson-dndbub?file=/src/App.js:527-706

赞(0）回复(0）举报 2023-01-30

jogvjijk2#

我最终使用了useTheme钩子来完成这个任务，我不太喜欢它的外观（我不想使用sx），但是它完成了任务。
我不得不在主题中添加color：

white: {
  main: "#FFFFFF",
  color: "#FFFFFF",
},

这是我导入它的方式：

import { useTheme } from "@mui/material/styles";

// ...

const theme = useTheme();

// ...

<Grid
    item
    sx={{
        backgroundImage: "url(...)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "column",
    }}
>
    <Typography variant="h1" sx={{ color: theme.palette.white }} gutterBottom>
        This text should be white.
    </Typography>
</Grid>

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 自定义主题颜色未在MUI中应用

2条答案

相关问题

热门标签

最新问答