Overwrite CSS Styles of an External Library
Here’s another common mistake that people made when you need to overwrite styling from an external library. It’s easy to do, but hard to get it right. In this case I will be using the 2nd most popular React Component library by the time this post is written.
Focus on the bottom part; this is the common mistake that I see people wrote. It serves the purpose of overwriting the original styling, the problem of writing it this way is that it’s the compiled version of the styling. Not the way we should have it in the codebase. It’s not really readable of what is actually being overwritten.
While the top part is where I think should be the way you write when overwriting a styling from an external library.
If you follow that pattern, it’s much easier to maintain say that you need to change the styling on just the td or th part of the table. If you go the bottom route, then you will need to change a lot of that compiled stuffs.
Now where does that bottom part is coming from if you were asking. Why a lot of people writing it that way? It’s actually coming from the browser.
Here I’m using the Google Chrome, and as you can see browser is showing the compiled version of the SCSS. Meaning that the styling there is already specific for that element but it’s not meant for the developers to write it that way. And say that we need to reduce the padding to 10px; a lot of people will translate that code to this.
While that part of code will fulfill the requirement, it does not translate to a good code. So if I may give suggestion to everyone out there, please don’t do this and overwrite the styling in the correct way. Happy coding!