MUI styles overriding Tss react styles while upgrading to MUI v5
vengeance1464 opened this issue · 11 comments
I have tried using tss react cache and mui cache and still MUI styles are overriding the TSS react styles.
I have tried uninstalling mui packages ,removing package-lock.json still the issue is not getting solved.
I have to increase specificity of tss styles.
Please help
Hello,
Please share a reproduction repository
Its a private repository
The issue you're encountering often arises when multiple instances of @emotion/react coexist within your application. This is also a common problem in microfrontend projects, where there might be a single copy of @emotion/react, but multiple instances of the code are running simultaneously, resulting in the same issue.
This is a private repository
Please note, a reproduction repository doesn't have to be the original repository itself. Instead, it can be a minimal repository that allows the library maintainer to replicate and understand the problem.
There are a lot of files so I have just added few files to show how I am using tss-react in this project. I have given access to this repo to you @garronej
https://github.com/vengeance1464/test-mui
Well @vengeance1464,
I don't know specifically what isn't working as you expect it to and I can't run the repo you shared.
All I can see is you are still using clsx, with tss-react you are supposed to use cx() instead.
Also here: https://github.com/vengeance1464/test-mui/blob/4149f752773e52c226794cc88a4c941350236317/text-field-styles.ts#L5
You are explicitely labeling the theme argument with Theme. This is not required. The type is iffered automatically. Not that it has any effect on your problem though.
For eg here mui style is overriding tss react style for the text field component class which I have shared
Styles created by Emotion typically follow the format .<cache name>-<hash>-.... However, the styles you've shown me are applied directly to .MuiInputBase-input. Please note that these styles are not handled by Emotion, hence it's your responsibility to appropriately position them in the <head> section of your document.
Unfortunately, without seeing the context or the code, it's challenging for me to determine how you've ended up in this situation. If you could provide me with your code, I would be able to quickly identify and explain the issue at hand.
There is no head section in the code.. However earlier the jss styles were overriding these but not in tss.
The builtin MUI styles are usually applied through @emotion. This is why TSS is able to control the priority.
Do you have the production link of the website that uses JSS?
I am not allowed to share the link, but I found the issue that while using jss we were using something like this example
we were adding {index:1} to change CSS injection order and because of this they were overriding the mui styles and appearing towards the end in head but I couldnt find the equivalent of {index:1} in make styles in tss react
I am not allowed to share the link
While I understand you're unable to share the project's code, it would be highly beneficial if you could create a separate repository that reproduces the issue you're facing. This is a common strategy when seeking help from maintainers.
If this is not possible for you, I regret to inform you that this will be my final response.
There are two primary methods for controlling priority in Emotion:
- Utilizing cx (returned by
useStyles). This method can prove helpful, especially given that for unknown reasons, the default MUI styles don't seem to apply by Emotion in your project. - Establishing a custom emotion cache allows you to specify an
insertionPoint, which dictates where your style should be inserted within the head. Ideally, you'd want your custom styles to be placed after Mui's default style in the head.