我想使用样式组件设置 MUI 按钮的样式。我想将 variant='outlined'
作为道具传递给组件。这是我正在尝试的:
export const StyledButton = styled(Button).attrs(() => ({
variant: 'outlined',
}))
答案 0 :(得分: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