Install babel-plugin-styled-components in create-react-app

Question

I am trying to use the styled-components-babel-plugin with a create-react-app application, to get the components name as classname in my chrome dev tools. But somehow, i do not get the classnames to change. I installed Babel and the plugin like described on the website and created my .babelrc like this:

{
  "presets": ["env"],
  "plugins": ["babel-plugin-styled-components"]
}

I tried a lot of combinations of presets (including react-app) and other babel configs, also tried to do it in the package.json but I can not get it to work. The problem is, that i never used babel and barely know, why i would need it. So I have no idea, if I made an error on the babel or the styled-components side. Does anybody have a example project with a the working styled-components babel plugin?

Answer 1

There is a much easier way of achieving this and it doesn't require ejecting or any additional packages to be installed:

Instead of importing styled-components like this:

import styled from 'styled-components';

Import it like this:

import styled from 'styled-components/macro';

If that isn't working for you it is likely that you need to update styled-components or react. Further information can be found in the styled-components documentation.