我做了一些研究,但找不到解决方法。
我正在尝试使用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();
...
}
答案 0 :(得分:1)
您的自定义主题应用于以下行:<ThemeProvider theme={theme}>
,并在此之前调用makeStyles函数。
这意味着,在此行const classes = useStyles();
中,您将调用makeStyles
函数,但是您的主题仍然是默认主题。
解决方案就是您已经完成的工作,创建一个CustomizedButton
并在其中调用useStyles挂钩。