如何將自定義樣式傳遞給MUIV5樣式的組件？-有解無憂

使用 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>  
     
   )
}

uj5u.com熱心網友回復：

您可以在創建它們時更改它：

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;

uj5u.com熱心網友回復：

如何將自定義樣式傳遞給 MUI V5 樣式的組件？

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/368193.html

標籤：javascript css 反应材质-ui

上一篇：const{authenticated}=this.props是未定義的，盡管我可以在redux中清楚地看到它

下一篇：React：通過id選擇一個元素會列印錯誤的元素