fix: insert style nodes before existing style nodes to allow override

[fbedussi]

this fix leaves the user style nodes as the last ones in the header in order to give them more specificity and allow them to override the style of SUID components.

Do you see any downside?

[juanrgm]

How would this problem be solved in mui/emotion?

[fbedussi]

You have to use the StyledEngineProvidercomponent with the injectFirstprop:

<StyledEngineProvider injectFirst> {/* Your component tree. Now you can override MUI's styles. */} </StyledEngineProvider>

StyledEngineProvider

Here the implementation: https://github.com/mui/material-ui/blob/512896973499adbbda057e7f3685d1b23cc02de9/packages/mui-styled-engine-sc/src/StyledEngineProvider/StyledEngineProvider.js

Do you suggest to implement the same HOC?

[juanrgm]

Yep, that is the way.

Some time ago I already created StyledEngineProvider, so implementing injectFirst should be easy.

[fbedussi]

it should be something like this: https://github.com/swordev/suid/commit/7d5adeee6a64dd8c4d2aa20253d12484a5a9bc91 but when I try this out context.injectFirst is undefined in packages/styled-engine/src/createStyle.ts

of course I did pass the injectFirst prop in the tester application:

render(() => (
  <StyledEngineProvider injectFirst={true}>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </StyledEngineProvider>
), document.getElementById('root') as HTMLElement);

[juanrgm]

Need help?

[juanrgm]

Closed via d4cede7e1d932acc9137dbbdb19608bc3df45159.