ant design 中相关组件的样式化

Question

我可以通过简单地用 styled 包装它来设置 antd 复选框组件的样式。

import { Checkbox } from 'antd';
const StyledCheckbox = styled(Checkbox)`...`

但是，当我想渲染一些衍生的东西时，比如Checkbox.Group， 当我使用 StyledCheckbox.Group

时，所有样式都会中断

样式化版本不再包含 group 属性。

有没有办法克服这个问题？

Answer 1

有办法克服吗？

我不这么认为。我认为您应该创建两个共享共同样式的样式组件：

import styled, { css } from 'styled-components';

const commonStyle = css`
  ...
`;

const StyledCheckbox = styled(Checkbox)`
  ${commonStyle}
`;

const StyledCheckboxGroup = styled(Checkbox.Group)`
  ${commonStyle}
`;