时间戳

首页 > 解决方案 > 如何使用样式化的 MUI 基于道具制作不同的组件变体？

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

问题描述

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

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"？

标签： javascriptreactjsmaterial-ui

解决方案

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

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

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

推荐阅读