CODEWITHSUNDEEP
antdstyled-componentsant-design-pro
Anisotropic
Anisotropic

Reputation: 645

Styling related components in ant design

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?

Upvotes: 1

Views: 240

Answers (1)

aquinq
aquinq

Reputation: 1448

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

Upvotes: 2

Related Questions