There are times when you are writing your UI component and want to add style variants to it. A button component can be a "primary" button with a "blue" background or a "secondary" button with an "orange" background. If I asked you to create a button ...
In the previous post, we made our css emotion like function and in this blog post, we are going to extend our css function to support the following style-components syntax. const Button = styled('button')( { backgroundColor: "blue", color:...
In this blog post, we will try to understand CSS-in-JS by creating our own version of emotion.js. Emotion is one of the most popular CSS-in-JS solutions out there. There are some brilliant minds working on emotion, we aren't going to recreate emotio...
Total Isolation This comes as the result of the global nature of CSS where things are leaky and thus component-based UI architectures find it difficult as cascading and global CSS causes leaks in styles across the components. For example: <!-- Headi...
Global and cascading nature of CSS CSS is global by design! It is that way because we want to bring consistency across the website. html { font-family: Roboto, sans-serif; } By writing the above code every text on your website has a font-famil...
