如何在MUI的Styled Component中预设Button的Variant属性

你已经通过MUI的styled工具创建了带自定义样式的Button，现在想在StyledButton的定义里直接把variant固定为"contained"，不用每次使用时手动传这个属性，这里有两种简单的实现方式：

方法一：利用styled的options参数设置默认属性 #

修改StyledButton.js，在调用styled时传入第二个参数，通过defaultProps指定默认的variant值：

import styled from "@mui/system/styled";
import Button from "@mui/material/Button";

const StyledButton = styled(Button, {
  defaultProps: {
    variant: "contained"
  }
})({
  width: 100,
  fontSize: 12,
  textTransform: "none",
});

export default StyledButton;

方法二：封装包装组件传递默认属性 #

如果觉得上述方式不够直观，也可以单独封装一个组件，内部自动传入variant属性，同时保留自定义样式：

import styled from "@mui/system/styled";
import Button from "@mui/material/Button";

// 先定义带自定义样式的基础按钮
const BaseStyledButton = styled(Button)({
  width: 100,
  fontSize: 12,
  textTransform: "none",
});

// 封装组件自动传入variant
const StyledButton = (props) => {
  return <BaseStyledButton variant="contained" {...props} />;
};

export default StyledButton;

修改完成后，在App.js里直接使用<StyledButton>Add App</StyledButton>即可，variant会自动应用为"contained"，同时你的自定义样式也会正常生效。

内容的提问来源于stack exchange，提问作者ram