如何使用 styled-components 将 prop 传递给 Material-UI 组件

Posted 2023-02-22

【中文标题】如何使用 styled-components 将 prop 传递给 Material-UI 组件

【英文标题】：How to pass prop to Material-UI component using styled-components

【发布时间】：2021-05-19 18:46:35

【问题描述】：

我想使用样式组件设置 MUI 按钮的样式。我想将variant='outlined' 作为组件传递给组件。这是我正在尝试的：

export const StyledButton = styled(Button).attrs(() => (
  variant: 'outlined',
))

它会抛出这个错误：

【问题讨论】：

他们在 MUI 文档中有一个这样的例子：material-ui.com/guides/interoperability/#deeper-elements-2

【参考方案1】：

要传递属性，您必须执行以下操作：

const StyledButton = styled(Button)`
  background-color: #6772e5;
  color: #fff;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 7px 14px;
  &:hover 
    background-color: #5469d4;
  
`;

export default function StyledComponent() 
  return (
      <StyledButton variant="outlined">Customized</StyledButton>
  );

更多内容可以参考官方Doc