Popular posts

Problem

To answer your question, let's go back to where the problem was. Initially, before using things like styled-components, if you had used something like Bootstrap, you would use the same classes all over your app. If you want to customize something, then you would add more classes to your div and then add a particular style for that new class in your css files. Again, doing this becomes unmaintainable after a point of time since feature requests or UI revamp will make it a huge mess.

Solution

To solve this problem, you can use something like css-modules, in which you can create a separate CSS file and import that CSS file in your JS. It will, in turn, make your app componentized. So, when you want to add more styles in the future, you can only make changes in your components' CSS file. This becomes easier to maintain since you can extract your component, make CSS changes and you're done. You don't need to add extra classes to make it work.

My experience with CSS-in-JS

For styled-components, I use it with Ant Design and it's working perfectly. Generally, if I need to make any changes to any of the framework's components, I wrap them inside a wrapper component. Let's say, I want to make style changes to the card component. I would create a file called card-wrapper and override the styles:

/**
*
* CardWrapper
*
*/

import Card from 'antd/lib/card';
import styled from 'styled-components';

const CardWrapper = styled(Card)`
  border: 1px solid #eee !important;
  border-radius: 0;
  color: #333;

  &:hover {
    box-shadow: none;
  }

  .ant-card-extra {
    top: 8px;
  }
`;

export default CardWrapper;

This makes it very easy for me to make changes to the style in the future.

Hope this helps you! :)