如何将自定义样式传递给 MUI V5 样式组件？

Question

使用 MUI V5，如何将自定义样式传递给按钮组件？ 这是我一直在尝试将旧方法与新 MUI v5 合并的方法，但它不起作用。

import { Button } from "@mui/material";
import { styled } from "@mui/material/styles";
import React from "react";

const StyledButton = styled(Button)(({ theme }) => ({
  root: {
    minWidth: 0,
    margin: theme.spacing(0.5),
  },
  secondary: {
    backgroundColor: theme.palette.secondary.light,
    "& .MuiButton-label": {
      color: theme.palette.secondary.main,
    },
  },
  primary: {
    backgroundColor: theme.palette.primary.light,
    "& .MuiButton-label": {
      color: theme.palette.primary.main,
    },
  },
}));

export default function ActionButton(props) {
  const { color, children, onClick } = props;

  return (
    <Button
      className={`${StyledButton["root"]} ${StyledButton[color]}`}
      onClick={onClick}
    >
      {children}
    </Button>
  );
}

现在我想调用这个 Button 并给它 color="secondary"

import ActionButton from "./ActionButton";
import { Close } from "@mui/icons-material";
export default function Header() {
    return (
       <ActionButton color="secondary">
            <Close />
       </ActionButton>  
     
   )
}

Answer 1

您可以在创建它们时更改它：

import { createTheme } from '@material-ui/core/styles';
const theme = createTheme({
  overrides: {
    MuiButton:{
      label:{
        color:"yellow"
      }
    },
    MuiButtonBase:{

    },
})

它对我很有用

那么你需要将它传递给你的主布局：

import React from 'react';
import theme from "theme/theme";
import {ThemeProvider} from '@material-ui/core/styles';

const ThemPro = ({children}) => {
    return (
        <ThemeProvider theme={theme}>
            {
                children
            }
        </ThemeProvider>
    );
};

export default ThemPro;

Answer 2

import {makeStyles} from '@material-ui/core/styles';
    import React from "react";
    import {Button, FormControl, InputLabel, Select, TextField, Typography} from "@material-ui/core";
    const StyledButton = makeStyles(( theme ) => ({
        root: {
            minWidth: 0,
            margin: theme.spacing(0.5),
        },
        secondary: {
            backgroundColor: "red",
            "& .MuiButton-label": {
                color: theme.palette.primary.main,
            },
        },
        primary: {
            backgroundColor: theme.palette.primary.light,
            "& .MuiButton-label": {
                color: theme.palette.primary.main,
            },
        },
    }));
    
    export default function FormSimple(props) {
        const { color="secondary", children, onClick } = props;
        const Styled=StyledButton()
        return (
            <Button
                className={`${Styled["root"]} ${Styled[color]}`}
                onClick={onClick}
            >
         test
            </Button>
        );
    }

Answer 3

看起来您的代码是尝试使用makeStyles/useStyles从代码迁移，但styled工作方式有很大不同。 您不能像makeStyles那样使用它来生成多个 CSS 类（ StyledButton["root"]和StyledButton[color]将是undefined ）。 styled将生成一个 CSS class 然后在className prop 中传递给包装的组件（例如Button ）。 Instead of trying to create multiple CSS classes with logic to decide which class to apply, with styled you can leverage props (eg the color prop) to generate dynamic styles within the single CSS class that is generated.

下面是一个我认为可以达到您的代码目标效果的示例。 我的示例没有对MuiButton-label执行任何操作，因为在 v5 中不存在 class （并且在 v4 中的<button中应用了 class 的<span>也不存在），我相信默认的 Button styles当color道具被允许传递给Button时，根据需要设置color 。

import Button from "@mui/material/Button";
import { styled } from "@mui/material/styles";

const StyledButton = styled(Button)(({ theme, color }) => ({
  minWidth: 0,
  margin: theme.spacing(0.5),
  backgroundColor: color ? theme.palette[color].light : undefined
}));

export default StyledButton;