Styled Components and organization

Tram Ho

Hi guys, like today’s title I would like to introduce some tips on working with styled components .

In React projects I support, most of them use styled components to replace traditional CSS or SCSS writing. This is a common library used to styled the React App.

Why not use SCSS to styled.

With React, we write styles of components like normal CSS is to import this corresponding CSS file into that component (or the root component that contains it). If it is a SCSS file, we can use node-sass to import it directly or we can use webpack to build similar. However, with React that way is not recommended, because it does not show which CSS corresponds to which component, the style should come with the component.


With npm

Or use a CDN

Create a component

We can also extend the component easily

Some tricks you may not know

1. Use the Context API

2. Flexible styled with props

This is an interesting feature when using styled components, you can pass props to the styled to be more flexible.

3. Selector to another element

Like traditional CSS, you can also selector to child or level elements.

4. Inheriting styled but custom tagName

With the styled components you can also change the tag name from the original definition. Suitable for creating common but can flexibly change the HTML5 tag structure accordingly.

5. Add attributes via attrs

6. Override existing / inline style

Usually it is used when you override the styled of an existing component in the library, for example you use reactstrap and want to customize the component, please see the demo below:

7. Definition of keyframe CSS3

8. Mixins pattern

9. Planning how to be easy to manage

By now, you probably know quite a lot about this young man. I usually organize React projects with the structure as below, I think this is the best organization way to work with styled components.



  • Transmission is flexible props
  • Optimal good performance
  • Packaging is styled into the component, avoiding duplication selector problem
  • Nested, inherited, prefixed with SCSS and accessible


  • It takes a long time to define a component
  • Class names are randomly generated, so it is annoying for people who are familiar with debugging css with class names
  • CSS-in-JS writing style, so many people will not like it
  • Do not use ref on the component must switch to innerRef because the ref will be passed to the wrapper of the styled component instead of the component you want.

These days, you have to use tools

– Debug tool

With styled components, debugging CSS is not easy. However, thick tangerine peel with pointed nails, pointed nails had nail clippers . This is the official debug tool, you can follow this link to setup in source:

– Extension VS Code

To increase the typing speed I often use these 2 children, there are many support features

If you have more interesting tricks, please share more in the comments! Thanks bro.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo