loading...

Discussion on: 3 Ways You Could Customize 3rd Party React Component

yerycs profile image
yerycs

And if using this method, I have to use !important to override component.
Can you tell me if any other way is not using !important.
Thank you.

Thread Thread
jacobgoh101 profile image
Jacob Goh Author

Since

:global(.a-class-inside-component) {
    padding: 1px;
}

will be compiled to

.a-class-inside-component {
    padding: 1px;
}

it will affect every components which uses class .a-class-inside-component globally.

If you want the CSS to be applied globally, this is alright.
If you want to scope the CSS to 1 component only, it's recommended to use a wrapper class.

Thread Thread
yerycs profile image
yerycs

Thank you very much.
Should I use !important in my custom modules.scss to override css?
Is there any other way?

Thread Thread
jacobgoh101 profile image
Jacob Goh Author

Generally, it's considered a bad practice to use important. Don't use it unless you absolutely have to.

To avoid using important => stackoverflow.com/a/27443631/5599288

Thread Thread
yerycs profile image
yerycs

I will consider your words.
Thank you for your kindly help.
Hope good posts in the future.
Regards!