CODEWITHSUNDEEP
cssreactjsantd
hernandeΩ
hernandeΩ

Reputation: 89

Styling component doesnt work in external scss file

When I use inline styles on some antd elements, the styles apply to the element. When I apply a className to the same Item, the style does not apply I dont know why.

<Item
    colon={false}
    label={label}
    labelAlign="right"
    labelCol={{ span: 6, offset: 6 }}
    // className={styles.action}
    style={{ margin: 0, padding: 0, textAlign: 'left' }}
>
   {val}
</Item>

I use the exact same styles as the line in style but it doesnt apply to the element. Its not the file linking because I use the styles at different parts on the page and it works. Its also not a spelling mistake in the scss file.

Upvotes: 0

Views: 150

Answers (1)

Vinay Sharma
Vinay Sharma

Reputation: 3777

The solution can be broken down into 2 steps:

  1. Find the class name of the Ant Design component you wish to change via inspect element in developer tools of your browser.

  2. Write down the class name in the SCSS file and add each style with !important keyword to override the Ant Design default ones.

Note: Usually Ant Design elements are nested when you inspect, so it's suggested to write down the classes in same nesting order in the SCSS file.

Why inline styles works?

It's because inline styles have higher precedence than the styles written in an external stylesheet. That's why you are able to override a UI Library's styles easily. However, it's not suggested to use inline styles in a React as it severely affects code readability maintainability and readability, unless you don't have a use case like this.

Upvotes: 1

Related Questions