如何使用样式化的 MUI 基于道具制作不同的组件变体？答案

【问题标题】：How to make different variants of component based on props using styled MUI?如何使用样式化的 MUI 基于道具制作不同的组件变体？
【发布时间】：2021-10-17 15:14:24
【问题描述】：

我正在尝试使我的组件根据道具看起来不同，例如使用 styled 函数的“variant”，如下所示：

import { styled } from '@mui/material/styles';

const RemoveButton = styled(Button)(({ theme }) => ({
  backgroundColor: 'lightgreen',
}));

function App() {
  return (
    <>
      <RemoveButton>Remove Button</RemoveButton>
    </>
  );
}

export default App;

例如，如果我希望我的组件在variant="contained" 时为红色，而在variant="outlined" 时为蓝色，我该怎么办？

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

如果您想使用 styled 根据其 props 设置组件样式：

const RemoveButton = styled(Button)(({ variant }) => ({
  ...(variant === "contained" && {
    backgroundColor: "red"
  }),
  ...(variant === "outlined" && {
    backgroundColor: "blue"
  })
}));

您还可以使用createTheme 创建自己的自定义变体，有关详细信息，请参阅this 答案。

【讨论】：

【解决方案2】：

好吧，没关系，我认为我自己的 idk 是 mui 推荐的解决方案，但它对我很有效：

const RemoveButton = styled(Button)(({ theme, ...otherProps }) => ({
  backgroundColor: {"contained":"red","outlined":"green"}[otherProps.variant],
  padding: theme.spacing(1),
}));

【讨论】：

如果你想使用未知变量的回退值，你可以使用??操作符。相关answer.