代码之家  ›  专栏  ›  技术社区  ›  Terje Nygård

反应18和材料UI(@mui)。样式不会附加到主题中

  •  0
  • Terje Nygård  · 技术社区  · 1 年前

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

    )}

    后果

    enter image description here enter image description here

    1 回复  |  直到 1 年前
        1
  •  1
  •   Jamie    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>
    );