How I structure styled-components

styled-components is an approach to writing CSS, in JavaScript. It has all the features which enhance the styling of React components

• Automatic critical CSS — No unnecessary code on your page, only renders the CSS when the components are injected into a page
• Dynamic styling — It adapts the styling of a component based on the props
• Supports Global CSS
• Supports Server Side Rendering (SSR)
• Automatic vendor prefixes
• Unique class names, that means no class names bugs

I use styled-system to pair with styled-components. It makes the Component Orient Design lifestyle easy 😊 The style functions API of the styled-system exposes powerful props and with that leverage, it makes the styled-components even more powerful 💪 and we can use those props for styling the components or elements which can also be based on a theme.

While building or developing a component, the question that arises is

How to design & develop the component, so that the component can be re-used?

Easy, I follow Atomic Design Methodology which says — Split the big chunk of UI into small and easily manageable components. This makes the component reusable ♻️

Starting with the Theme 🌈

How I create the styled-elements which can be re-used ♻️

If we extend the created components, we can create a new styled component that inherits the style of the main component and create multiple variants from this. For example