'How to cancel stylesheets rules for certain elements in page

I using ANTD framework for building an app. And latelly i noticed one small issue with one of ANTD elements when i import antd-theme.css For some reasons that css overides rules for one ANTD elements and makes it look terrible. I cannot refuse from using this css stylesheets because it's needed for other elements all over the app. So it's imported in index.js Also i cannot overide this rule which breaks ANTD element, because it's stylesheet has 24844 lines. And i will never find what exectly breaks it. Believe me I tried:(
I was curiouse is there some how possible to make some element/elements ignore certain stylesheets? Like something

<Radio style={{igonereCss}} />
htmlcssjsxantd


Solution 1:[1]

I think you can give your element a class that you define and it will use that over the other styles

<radio class="mystyle">

Then in your main css style sheet just define a style for that. It doesn't have to do anything, but it might override the styles that are happening elsewhere.

.mystyle { }

Solution 2:[2]

you can change style of specific component by overriding default class in your css file (you will get all the element classes from developer tool) for that element

.ant-radio-checked .ant-radio-inner{
   background-color:#fdfdfd !important;
}

as a result it will override the style globally, to override the style for specific component only just wrap the component in some div by giving class "test" and override the css

.test .ant-radio-checked .ant-radio-inner{
   background-color:#fdfdfd !important;
}

and it will update the style for specific component only

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ArcticDoom
Solution 2 Siddharth Bagal

Related Questions