Is there a way to add an id prefix to generated style rules, for a higher specifity

[carpben]

We want to render components in an environment that already has id selectors for style rules. For examples:

#container h1 {
    // some-rules
}

So to override this we need to either add id to the selector, or to use inline style tags. We'd like to avoid inline style tags. Is there a way to prefix selectors in generated style tags with an id?

<style>
- .generatedClass {
+ #container .generatedClass { 
    // some-rules
}
</style>

[danbiilee]

You can use & in styled component.
& in Title component replaces with generatedClass, thus overrides #container h1 selector.

const Title = styled.h1`
  #container & { 
    color: blueviolet;
  }
`;

Or You can use component selector pattern. Styled component could be assigned as a css class in other styled component like below.

// Overrides ❌
const Title = styled.h1`
  color: gray;
`;

// Overrides ⭕️
const GlobalStyle = createGlobalStyle`
  #container ${Title} {
    color: gray;
  }
`;

Please check this sample code :)

[carpben]

That's awesome. Thanks @danbiilee ! I prefer the first, as it's less code, and only inserts one selector to the dom.

[quantizor]

There are two approaches:

1. Use & nesting to scope rules within a parent selector:

const Title = styled.h1`
  #container & {
    color: red;
  }
`;

2. Use stylisPlugins on StyleSheetManager to write a custom stylis plugin that prepends a selector to all rules:

<StyleSheetManager stylisPlugins={[myPrefixPlugin]}>
  <App />
</StyleSheetManager>

Approach 1 is simpler for individual components. Approach 2 is better if you need it globally.