Styled Components adding component name as class name

Question

I'm using Preact with styled-components (storybook) and webpack to build my project

I have a component called AlphaBarWrapper with a styled component inside of it called StyledAlphabar.

Styled Components is adding AlphaBarWrapper_StyledAlphaBar-sc-[random string] as a classname to my component when rendered.

I'd like this to be the standard sc-[random string] class name instead. I can't find any documentation on why it is rendering this.

This occurs in both a standard webpack build and the storybook build, so I expect that there's an option that I'm missing.

Answer 1

If i'm right understood your issue you need install babel-plugin-styled-components. Then in the root directory create .babelrc and put this code:

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": false, // generate other classname
        "fileName": false, // generate other classname
      }
    ]
  ]
}

documentation