I have a large stylesheet that I'm storing in a variable cleanSlateRules. I have a styled component as the main wrapper of my entire app, i.e. export const StyledApplication = styled.main. If I import cleanSlateRules at the top of my StyledApplication, those rules break the cascade and override my own styles that I have later in the app. For example, if inside my StyledApplication I return a button element with a green background, the button will still be styled like the browser default if I keep cleanSlateRules at the top of my StyledApplication stylings.
I want to avoid using createGlobalStyles because I'm creating and embeddable widget and, therefore, don't want to set styles in the page <head>.
I've tried the following:
import {cleanSlateRules} from "./cleanSlateRules.ts"
export const StyledApplication = styled.main`
${cleanSlateRules}
// other styles...
`
and also a method that can use createGlobalStyles a bit more safely, but has the exact same effect:
export const GlobalStyles = createGlobalStyle`
.my-specific-widget {
${cleanSlateRules}
}
`;
What can I do use styled-components and do my clean slate reset, but ensure those styles have lower specificity than the actual styles I want for my actual components? For now I'm whacking !important on everything.