如何解决如何在“makeStyles()”中使用“createMuiTheme()”制作的“theme”?
我使用 customTheme
制作了 createMuiTheme()
,并在 <ThemeProvider>
中使用了它。
现在,我想使用 customTheme
函数内的 makeStyles()
制作一些自定义样式。但是 makeStyles()
没有得到我的 customTheme
。它获取默认主题。
代码:
import React from 'react';
import { createMuiTheme,makeStyles,ThemeProvider } from '@material-ui/core';
const customTheme = createMuiTheme({
palette: {
primary: {
main: '#f0f'
},}
});
const useStyles = makeStyles((theme) => ({
Box: {
height: '100px',width: '100px',backgroundColor: theme.palette.primary.main
}
}));
export default function App() {
const classes = useStyles();
return (
<ThemeProvider theme={customTheme}>
<div className={classes.Box}>
makeStyles
</div>
<div style={{
height: '100px',backgroundColor: customTheme.palette.primary.main
}}>
inline style
</div>
</ThemeProvider>
);
}
截图: Screenshot Image
如屏幕截图所示,第一个 <div>
具有使用 makeStyles
的 Material-UI 的默认深蓝色。
第二个 <div>
具有自定义颜色,即使用内联样式。
那么,我如何使用 customTheme
中的 makeStyles()
?
解决方法
尝试 ThemeProvider 包裹 App 组件,根据我的理解,提供的主题将应用于包裹在其下的 React 组件。因为“makeStyles div”只是一个元素,样式不适用于它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。