蚂蚁设计中相关组件的样式

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}
`;