Стилизация связанных компонентов в дизайне муравьев

Question

Я могу стилизовать компонент флажка antd, просто обернув его стилем.

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

Однако, когда я хочу отобразить что-то производное, например Checkbox.Group, все стили прерываются, когда я использую StyledCheckbox.Group

Стилизованная версия больше не содержит групповое свойство.

Есть ли способ преодолеть это?

Answer 1

Есть способ преодолеть это?

Не думаю. Я думаю, вам лучше создать два стилизованных компонента с общим стилем:

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

const commonStyle = css`
  ...
`;

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

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