如何將自定義樣式傳遞給 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;