ant design中样式化相关组件

Question

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

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

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

时，所有样式都会中断

带样式的版本不再包含组 属性。

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

Answer 1

Is there a method for overcoming this?

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

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

const commonStyle = css`
  ...
`;

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

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