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

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

react-18 material-ui reactjs

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

)}

后果

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>
);

推荐文章

Mohammed Sabir · 下一个js getServerSideProps中的水合错误

11 月前

mettamyron · 具有多用途的材质UI滑块单击时状态重复

1 年前

MatterOfFact · React:Formik形式的物料UI单选按钮组重置不起作用

1 年前

assembler · MUI 5自动完成将禁用的项目样式更改为不使用不透明

1 年前

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

1 年前

Alexander Farber · 如何在MUI X DataGrid列中显示img?

1 年前

ian · 使用“responsiveFontSizes”与“experiental_extendTheme”和“experimental_CssVarsProvider”反应MUI`

1 年前

beuluis · MaterialUI样式在带Vite的Shadow DOM中安装不正确的问题

1 年前

ismail.khn · 如何更改MUI日期选择器的“选择日期”标签?

1 年前

Donko · 单击时如何从MUI自动完成、文本字段中删除占位符文本?[副本]

1 年前