简体   繁体   English

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

[英]How to pass a custom style to MUI V5 styled component?

Using MUI V5, how can I pass a custom style to a button component?使用 MUI V5,如何将自定义样式传递给按钮组件? Here is what I have been trying to merge the old way with the new MUI v5 but it's not working.这是我一直在尝试将旧方法与新 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>
  );
}

Now I would like to call this Button and give it color="secondary"现在我想调用这个 Button 并给它 color="secondary"

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

you can change it when you create them:您可以在创建它们时更改它:

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

    },
})

it worked for me very well它对我很有用

then you need to pass it to your main layout:那么你需要将它传递给你的主布局:

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;

在此处输入图像描述

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

It looks like your code was an attempt to migrate from code using makeStyles/useStyles , but styled works quite a bit differently.看起来您的代码是尝试使用makeStyles/useStyles从代码迁移,但styled工作方式有很大不同。 You can't use it to generate multiple CSS classes like makeStyles does ( StyledButton["root"] and StyledButton[color] will be undefined ).您不能像makeStyles那样使用它来生成多个 CSS 类( StyledButton["root"]StyledButton[color]将是undefined )。 styled will generate a single CSS class that is then passed in the className prop to the wrapped component (eg Button ). 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. 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.

Below is an example that I think achieves the effect your code was aiming for.下面是一个我认为可以达到您的代码目标效果的示例。 My example doesn't do anything with MuiButton-label because that class doesn't exist in v5 (and the <span> that the class was applied to inside the <button in v4 also does not exist), and I believe the default Button styles set color as desired when the color prop is allowed to passed through to Button .我的示例没有对MuiButton-label执行任何操作,因为在 v5 中不存在 class (并且在 v4 中的<button中应用了 class 的<span>也不存在),我相信默认的 Button stylescolor道具被允许传递给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;

编辑样式按钮

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM