When my application loads into a parent div with a specific class (for example, .my-app), is there a way to add the prefix .my-app to all classes generated by styled-components?
For instance, consider a component like this:
import React from 'react';
import styled from 'styled-components';
const Button = (props) => {
return <StyledButton type="button">foo</StyledButton>;
};
const StyledButton = styled.button`
color: blue;
`;
export default Button;
Usually, the output might look like this:
<style data-styled="active" data-styled-version="5.1.1">
.cuetwY { color: blue; }
</style>
<div class="my-app">
<button class="cuetwY">foo</button>
</div>
But I am striving for the following result:
<style data-styled="active" data-styled-version="5.1.1">
/* Here you can see the added selector */
.my-app .cuetwY { color: blue; }
</style>
<div class="my-app">
<button class="cuetwY">foo</button>
</div>
I have experimented with both babel-plugin-styled-components-css-namespace and stylis-plugin-extra-scope, but it seems that they do not work well with newer versions of styled-components or older versions of SC paired with React 18.