Search code examples
styled-components

Labeling elements to differentiate

When using devtools, the classnames are sometimes difficult to differentiate.

Emotion js has here a good solution: https://emotion.sh/docs/labels

Basically they use the "Label" Property in css to append that to the generated class name.

Here some examples:

css-a281on-some-name css-1i3s76n-another-name

Does something like this exists for styled-components? I could not find it. If not, I would make a feature request.

Solution

  • You should try the babel plugin for styled-components. If the component ABC is created with styled-components in the file SomeFile.js, the class name for that component will look like SomeFile__ABC-fBdEtY JrIAq. Add the plugin to your babel config, either in .babelrc or in options.plugins in babel-loader if you use webpack.