React ViteJs css module priority order-CodePudding

My project is React with ViteJs and I use Material UI as the basis of my theme and components. However, in some components, for code readability (because some elements need multiple style property lines); I opted to create a module.scss file alongside to separate the behavior (tsx, jsx) and the style (scss).

My concern is that the custom styles I put in this .module.scss file has a lower priority than MUI. However, it is supposed to be an overload of what is by default given by MUI.

For this cause, I am obliged to put a whole '!important'; which is not clean.

Hence my question is, how to put the <style> of the MUI before the <style> of the css module in <head>, so that they are applied behind those of the MUI?

CodePudding user response：

As MUI documentation says, you need to use <StyledEngineProvider injectFirst> as wrapper for your component tree. Here is a working example from documentation.