gpt4 book ai didi

reactjs - 在 makeStyles 中使用自定义主题

转载 作者:行者123 更新时间:2023-12-03 14:16:36 24 4
gpt4 key购买 nike

我做了一些研究,但未能找到解决方案。

我正在尝试使用 createMuiTheme 创建一个主题,并稍后在 makeStyles 中使用它来检索内部的键。 (示例中的调色板)但是,自定义主题似乎没有在 makeStyles 中应用。

import React from 'react';
import ReactDOM from 'react-dom';
import { makeStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import red from "@material-ui/core/colors/red";

const useStyles = makeStyles(theme => {
console.log(theme); // Only defaults but not red in palette.
return {
root: {
color: theme.palette.primary[400] // This is not working.
}
};
});

function App() {
const classes = useStyles();
const theme = createMuiTheme({
palette: {
primary: red
}
});
return (
<ThemeProvider theme={theme}>
<Button className={classes.root}>Hook</Button>
</ThemeProvider>
);
}

但是在另一个使用 useTheme 的组件中它可以正常工作。我做错了什么?

const useStyles = makeStyles(theme => {
console.log(theme); // Here palette includes the new palette.
return {
root: {
color: theme.palette.primary[400]
}
};
});

function anotherApp() {
const classes = useStyles();
const theme = useTheme();
...
}

最佳答案

您的自定义主题应用于此行:<ThemeProvider theme={theme}> ,并且在此之前调用您的 makeStyles 函数。
这意味着,在这一行 const classes = useStyles();您调用您的makeStyles功能,但您的主题仍然是默认主题。
解决方案就是您已经做过的,创建一个 CustomizedButton并在其中调用 useStyles Hook 。

关于reactjs - 在 makeStyles 中使用自定义主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59464618/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com