代码之家 › 专栏 › 技术社区 › 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>
);

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

5 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

6 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

6 月前

noblerare · Vite错误-未定义导出(SSR)

6 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

6 月前