CSS not properly applied in production, RA 3.1.3, Material UI 4.9.0

[panfiva]

Production styles are applied differently from dev. I use the same MUI version as the one installed by react-admin component.

DEV

PROD

It appears that custom styles are applied before Material UI styles

Steps to reproduce:
See attached file full source code. /Home.js references custom {Tabs, Tab} components from /components/tabs. Custom Tabs and Tab components use Material UI Tabs/Tab components, which were renamed in code to MuiTabs and MuiTab.

app_src.zip

import React, { Children } from 'react';

import Divider from '@material-ui/core/Divider';
import { makeStyles } from '@material-ui/core/styles';

import MuiTabs from '@material-ui/core/Tabs';
import {Tab} from 'components/tabs';


const useStyles = makeStyles(
  theme => ({
      content: {
          paddingTop: theme.spacing(10),
          paddingLeft: theme.spacing(20),
          paddingRight: theme.spacing(20),
      },
      thisTabRoot: {
        minWidth: 50,
        maxWidth: 120,
        textTransform: "none"
      }
  })
);




const Tabs = (
  {
    children,
    basePath,
    content,
    missing,
    ...rest
  }
) => {


  const classes = useStyles();


  const tabHeaders = Children.map(children, (child, index) => {
    return <Tab value={index} index={index} label={child.props.label} classes={{root:classes.thisTabRoot}} />
  })

  const tabButtons = (
    <MuiTabs
      value={0}
      indicatorColor="primary"
      variant="scrollable"
      scrollButtons="auto"
      {...rest}
    >
      {tabHeaders}
    </MuiTabs>
  )


  return (
    <React.Fragment>
        {tabButtons}
        <Divider/>
    </React.Fragment>
    )

}

export default Tabs;

[Luwangel]

Hello, thank you for reporting an issue in react-admin.

Reading your example, it seems that you only use material-ui components. So you can report the issue directly in the material-ui repository.

You can also read the material-ui documentation which will explain to you how to override classes material-ui.com/api/tabs/css.

Regards,
Adrien

[panfiva]

@Luwangel ,

I used the same code in a pure React / Material UI application, and did not have any issues. Is is possible something in react-admin is causing the issue?

[panfiva]

I also noted that some of react-admin's styles are not applied in the right order. I tried opening a bug with material-ui, but then closed it as "support" request.

In DEV, I see "Layout" style next the the last one, while in PROD, it is move way up (also renamed to "makeStyles):

Dev - Layout style

PROD - renamed and moved up

[Luwangel]

It could be related to the material-ui version you use. Be sure to use the same version than the one used in react-admin.

You can also check the following issue which describes a similar problem with styles: #1782