样式不会通过主题追加

Question

我做了一些研究并尝试让主题在 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",

主题.ts：

import { createTheme } from '@mui/system';

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>
  ...
  ...

)}

结果：

Answer 1

我认为你的

ThemeProvider

和

createTheme

需要从

@mui/material/styles

导入。

这是一个工作示例：

import { ThemeProvider, createTheme } from "@mui/material/styles";
import Button from "@mui/material/Button";
import * as ReactDOMClient from "react-dom/client";

export const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        outlined: {
          borderColor: "green",
          color: "green",
        },
      },
    },
  },
});

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

root.render(
  <ThemeProvider theme={theme}>
    <Button variant="outlined">20 minutes</Button>
  </ThemeProvider>
);

Answer 2

使用此命令安装

npm i @mui/styles --legacy-peer-deps