如何使用styled-components向Material-UI组件传递属性

Question

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

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

然后抛出这个错误：

​

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

有关更多信息，请参阅offical Doc