Styling related components in ant design

Question

I am able to style an antd checkbox component by simply wrapping it with styled.

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

However, when I want to render something derivative, like a Checkbox.Group, all of the styling breaks when i use a StyledCheckbox.Group

The styled version no longer contains the group property.

Is there a method for overcoming this?

Answer 1

Is there a method for overcoming this?

I don't think so. I think you should rather create two styled components sharing common style :

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

const commonStyle = css`
  ...
`;

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

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