I am using Emotion 11 as css-in-js lib for a React project. My goal is to generate styles with a given prefix to the selector in order to increase specifity (the pages also include legacy css). .c50id { color: pink; } to #my-chosen-id .c50id { color: pink; } I found questions suggesting to use stylis-plugin-extra-scope but it does not seem to work anymore due to the upgrade to stylis 4. Any suggestion is welcomed, thank you!

add id prefix to css rule generated from Emotion 11

I am using Emotion 11 as css-in-js lib for a React project.

My goal is to generate styles with a given prefix to the selector in order to increase specifity (the pages also include legacy css).

.c50id {
  color: pink;
}

#my-chosen-id .c50id {
  color: pink;
}

I found questions suggesting to use stylis-plugin-extra-scope but it does not seem to work anymore due to the upgrade to stylis 4.

Any suggestion is welcomed, thank you!