Is it possible to prepend the generated styled-component classes with a custom class?

Question

Is it possible in the output of styled-components for a project to prepend all the classes with a fixed string?

e.g.

class="sc-fznyAO"

Would become

class="myProjectOne-sc-fznyAO"

I have several compiled projects running on the same page, each of which is a react app in a dedicated .js file. It would really help the readability and specificity to prepend all the random generated hashes with the project it was generated in.

So far tried using import styled from 'styled-components/macro'; to import styled-components. This gives some more controll and specificity. But I'm not really looking for controll every single element. These can all stay random hashes, I just want to prepend every single class with the same string for each project. I think this should be possible somewhere in the webpack configuration, but I can't seem to find it.

Answer 1

Below is an example which will give you a prepended class name

export const Example = styled("div").withConfig({ displayName: "myProjectOne" })(
  css`
    width: 100%;
  `
);