Styles order depends on script execution order

[panfiva]

Custom styles that are generated using makeStyles() function are sometimes applied before core styles

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Custom style created using makeStyles is applied before core MuiTab style. As the result, some of the custom properties are overwritten using default library properties. This causes incorrect capitalization and width of tabs.

Tab remains capitalized and wide. Should be narrower and have lowercase letters.

Expected Behavior 🤔

When applying custom styles, they should apply after core MUI styles to properly overwrite them. In the image below, both tabs should have lower case letters with maximum width of 50

In the picture above, both Tabs 1 and Tabs 2 elements should have the same width (max 50px) and capitalization (should have lowercase)

Steps to Reproduce 🕹

Steps:

1. Load https://codesandbox.io/s/tab-styles-issue-fyxql?fontsize=14&hidenavigation=1&theme=dark
2. Notice that both tabs 1 and tabs 2 folders contain exactly the same files and should produce tabs with max-width=50 and lowercase letters; Tabs 1 is formatted with material ui defaults.
3. Edit Home.js file and move line 9 before line 8
   
4. Notice that now Tab 1 is formatted correctly; however Tab2 is no longer correctly formatted.

Context 🔦

I am trying to make sure that styles are applied correctly to application. As I was building the page, I was having issues in the production; however the sample included also contains issues in my DEV environment.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.0
React	16.12.0
Browser	Chrome 79.0.3945.130
TypeScript	javascript
Application is configured using the latest create-react-app script (downloaded yesterday)

[oliviertassinari]

@panfiva This looks expected, the injection order depends on the script execution order. I believe you would get a similar experience with react-jss or styled-components. You could get a more predictable outcome by removing the circular import.

-import { Tab } from './index';
+import Tab from './tab';

There is almost no longer-term benefit it better documenting it considering we will offload the style engine to thrid-parties in v5 (which we already with JSS to be honest).

I hope it helps, we appreciate you took the time to create a reproduction :). I remember a similar discussion with @NMinhNguyen in the past.

[panfiva]

thank you so much... it helped.