CODEWITHSUNDEEP
antdstyled-components
ThePainnn
ThePainnn

Reputation: 441

styled components styled overriden by thrid party (antd) style

I've got a simple styled-components that is being applied to an antd component:

import { Card } from 'antd';

export const UsageCard = styled(Card)`

  box-shadow: 1px 1px;
  padding: 2px;
`

This creates a div with a class attribute that looks like : "ant-card edit-style__UsageCard-jsklqS hBLsXc ant-card-bordered"

Where .hBLsXc is my styled-component. Unfortunately the padding which is 2px in my styled-componentn gets overriden by the ant-card (0px).

Any idea why this is happening? The styled-components is supposed to come first since it's implemented over the thrid-party component. Is this a problem with the forwarding of className from third-party component I've read on multiple occasion? In any case, I don't really gets how this is supposed to work.

Thanks for your help!

Upvotes: 1

Views: 3164

Answers (1)

modmoto
modmoto

Reputation: 3290

The className has to be put in the Card Component, otherwise this will not work. You should check with antd to see if they did so. It has to look something like this:

const Card = ({ className }) => (
  <div className={className}>
    ...
  </div>
)

Here is the documentation for it:

https://www.styled-components.com/docs/basics#styling-any-components

edit: I checked with antd and it looks like you can pass the className to it. There is a section in https://github.com/ant-design/ant-design/blob/master/components/card/index.tsx:

const classString = classNames(prefixCls, className, {
      [`${prefixCls}-loading`]: loading,
      [`${prefixCls}-bordered`]: bordered,
      [`${prefixCls}-hoverable`]: this.getCompatibleHoverable(),
      [`${prefixCls}-wider-padding`]: this.state.widerPadding,
      [`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
      [`${prefixCls}-contain-grid`]: this.isContainGrid(),
      [`${prefixCls}-contain-tabs`]: tabList && tabList.length,
      [`${prefixCls}-type-${type}`]: !!type,
    });

You can pass the className via props. So this should actually work, but the passed className goes first, so I guess the antd styles will always override the styled-components ones, if they are the same. Maybe a fork might help?

Upvotes: 2

Related Questions