我做了一些研究,并尝试让主题在React v18中发挥作用。我以为我现在做得很正确,没有任何错误,但它不会给我的按钮添加任何样式。
它构建起来,没有任何错误。。。
伙计们,我在这里错过了什么?
**Package.json依赖项:**
"@material-ui/core": "^4.12.4",
"@mui/icons-material": "^5.15.8",
"@mui/material": "^5.15.7",
"@mui/styles": "^5.15.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
Theme.ts文件:
从“@mui/system”导入{createTheme};
const muiTheme = createTheme({
components: {
MuiButton: {
styleOverrides: {
outlined: {
borderColor: 'green',
color: 'green',
},
},
},
},
});
export default muiTheme;
用法
import { Box, Button, Card, CardContent, Grid } from "@mui/material";
import { ThemeProvider, makeStyles } from '@mui/styles';
import muiTheme from '../../muiTheme';
const useStyles = makeStyles((theme:any) => ({
outlinedButton: {
// Your custom styles for the outlinedButton class if needed
},
}));
const MyDashboard: React.FC = () => {
const classes = useStyles();
return (
<ThemeProvider theme={muiTheme}>
<Button className={`${classes.outlinedButton} MuiButton-outlined`} variant="outlined">20 minutes</Button>
...
...
)}
后果