compiled css precedence #16609

Luucky · 2019-07-15T15:25:34Z

When a project is compiled, the precedence of applied CSS rules changes.

This is not a v0.x issue.
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

.MuiDialogActions-spacing > * + * {
    margin-left: 8px;
}

... other styles ...

.MuiButtonBase-root {
    color: inherit;
    border: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    outline: none;
    padding: 0;
    position: relative;
    align-items: center;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    justify-content: center;
    -moz-appearance: none;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

Current Behavior 😯

.MuiButtonBase-root {
    color: inherit;
    border: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    outline: none;
    padding: 0;
    position: relative;
    align-items: center;
    user-select: none;
    border-radius: 0;
    vertical-align: middle;
    justify-content: center;
    -moz-appearance: none;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

... other styles ...

.MuiDialogActions-spacing > * + * {
    margin-left: 8px;
}

Steps to Reproduce 🕹

Run a demo of Dialog on localhost to see the expected behavior
Compile the demo and run to see the marginLeft of MuiDialogActions is overridden by margin of MuiButtonBase

Your Environment 🌎

Tech	Version
Material-UI	v4.1.3
React	v16.8.6
Browser	Chrome

The text was updated successfully, but these errors were encountered:

oliviertassinari · 2019-07-15T18:24:07Z

@Luucky Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

Luucky · 2019-07-16T09:17:02Z

@oliviertassinari Here's a link for the DEV EXAMPLE: https://codesandbox.io/embed/create-react-app-36pid
And here's a production build link: https://csb-36pid.netlify.com/

Notice how space between buttons disappears. The margin of ButtonBase overrides the DialogActions left of margin.

oliviertassinari · 2019-07-16T10:44:10Z

The CSS specificity of .x > * + * is 1 then we rely on

import '../Button'; // So we don't have any override priority issue.

to get the CSS injection order right.

The alternative is to increase the specificity to 2. I like this idea, it would make use component agnostic (work with everybody, not just our Button)

diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js
index ee57f0120..91b7c574a 100644
--- a/packages/material-ui/src/CardActions/CardActions.js
+++ b/packages/material-ui/src/CardActions/CardActions.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
-import '../Button'; // So we don't have any override priority issue.

 export const styles = {
   /* Styles applied to the root element. */
@@ -13,7 +12,7 @@ export const styles = {
   },
   /* Styles applied to the root element if `disableSpacing={false}`. */
   spacing: {
-    '& > * + *': {
+    '& > :not(:first-child)': {
       marginLeft: 8,
     },
   },
diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js
index 6fb342f5c..458c61350 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.js
+++ b/packages/material-ui/src/DialogActions/DialogActions.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
-import '../Button'; // So we don't have any override priority issue.

 export const styles = {
   /* Styles applied to the root element. */
@@ -15,7 +14,7 @@ export const styles = {
   },
   /* Styles applied to the root element if `disableSpacing={false}`. */
   spacing: {
-    '& > * + *': {
+    '& > :not(:first-child)': {
       marginLeft: 8,
     },
   },
diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
index 5451c6387..2e3f9f179 100644
--- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
+++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
-import '../Button'; // So we don't have any override priority issue.

 export const styles = {
   /* Styles applied to the root element. */
@@ -14,7 +13,7 @@ export const styles = {
   },
   /* Styles applied to the root element if `disableSpacing={false}`. */
   spacing: {
-    '& > * + *': {
+    '& > :not(:first-child)': {
       marginLeft: 8,
     },
   },

cc @eps1lon as you were advocating for removing the import (tree-shaking)
cc @NMinhNguyen as you were wondering about it

@Luucky I can't explain the behavior of the deployment. Something is wrong in the bundling pipeline independently from my previous comment about CSS specificity. ~~I can reproduce the problem with our CRA and Next.js examples~~.

Luucky · 2019-07-16T12:59:08Z

I also had a similar thing happen when I tried the following:

<List>       
       <ListItem button component={Box} border={1}>
               Click this item
       </ListItem>
</List>

ButtonBase would reset my border also after deployment.
I fixed it by doing the following, I don't know which is a better practice:

<List>       
       <Box border={1}>
                <ListItem button>
                        Click this item
                 </ListItem>
       </Box>
</List>

oliviertassinari · 2019-07-16T13:02:23Z

ButtonBase would reset my border also after deployment.

@Luucky This one is expected. Unless you control the import order, the CSS win is unpredictable.

canhbk · 2019-07-18T15:34:16Z

i have the same issue with @Luucky

dfmartin · 2019-07-31T23:44:34Z

I'm running into an issue that may be related. If not, I will open another issue.

When building my react app in production mode ($ npm run build) the order of the MUI style elements is getting mixed up with my own jss style elements. However, if I run it in development ($ npm start) everything is as expected. This is project is using 4.2.0. I have a similar project that is using 3.9.1 and it works the same both production/dev (i.e. correctly as I would expect).

it seems the production mode is the issue, but I do not know where to begin looking.

nickpalmer · 2019-08-28T17:55:12Z

The same issue exists with .MuiCardActions-spacing.

I just ran into this issue setting up server rendering. Server rendering has them in the right order and React.render renders them in the right order but React.hydrate results in .MuiButtonBase-root being added after .MuiCardActions-spacing which makes the buttons drop the left margin after hydrate.

oliviertassinari · 2019-08-28T18:00:19Z

@nickpalmer this symptom might hide another issue.

nickpalmer · 2019-08-29T02:29:15Z

@oliviertassinari After further investigation we have the exact same problem on our staging environment, we just never noticed. It thus has nothing to do with hydrate and everything to do with how create-react-app is compiling things for production.

dva · 2019-09-05T11:44:24Z

Fixed similar behaviour with webpack setting sideEffects to false, which is enabled in production mode by default.

module.exports = {
  //...
  optimization: {
    sideEffects: false
  }
};

https://webpack.js.org/configuration/optimization/#optimizationsideeffects

nickpalmer · 2019-09-05T23:28:49Z

@dva I can confirm that this resolves the issue.

dva · 2019-09-06T10:34:39Z

@nickpalmer final build getting bigger btw.

kokill · 2019-09-06T11:24:50Z

it works correctly if we disable SSR. in case of SSR few styles are picked from server css file.
i tried removing muisheet.collect(<App {...props} />) from server side and it resolved the issue currently.

oliviertassinari · 2019-09-06T14:41:56Z

While I can no longer reproduce the issue on Codesandbox, CRA and Next.js, I would propose that we move forward with #16609 (comment) so we can:

Be invariant to custom margins people might implement on the button
Maximize tree-shaking in people code that doesn't use a button in the actions
Help people that have buggy tree-shaking env and that don't use our recommended tree-shaking plugin.

alexandrecanuto · 2019-10-09T11:51:25Z

I'm running into an issue that may be related. If not, I will open another issue.

When building my react app in production mode ($ npm run build) the order of the MUI style elements is getting mixed up with my own jss style elements. However, if I run it in development ($ npm start) everything is as expected. This is project is using 4.2.0. I have a similar project that is using 3.9.1 and it works the same both production/dev (i.e. correctly as I would expect).

it seems the production mode is the issue, but I do not know where to begin looking.

I have this exact same problem.

EDIT: The workaround for me was adding {index: 1} in all of our components' withStyles, to ensure they were created after all the Material UI ones in production.

export default withStyles(styles, {index: 1})(MyComponent);

netcoding87 · 2019-10-10T08:27:35Z

We also have the same problem using version 4.3.3. The workaround provided by @alexandrecanuto helped.

It seems like jss.createStyleSheet is inserting new styles always at last when all have same index. If then a MUI component is rendered after makeStyles the order gets wrong. For me it looks like an issue with webpack optimization and jss in production mode vs development mode

Question: Why is this not set to 1 by default for makeStyles? Would this not help in future?

Kizmar · 2019-10-20T14:18:36Z

Running into the same issue on 4.5.0 - we're not using SSR. Just a typical CRA. We have a shared export const useGlobalStyles = makeStyles(theme => ({ ... })); file we use, and I'm noticing when these are imported using the const globalClasses = useGlobalStyles(); hook and applied with className, they are being stomped on by MUI styles.

In the image example below, the element is used like this:
<Grid container spacing={2} className={globalClasses.gridContainer}>

I would expect the .makeStyles-gridContainer-241 class styles to be more important than the MuiGrid-spacing-xs-2, but that's not the case.

This was working just a few days ago. We're seeing this even when running on localhost during development.

My workaround in this specific case was to change: margin: theme.spacing(0)
to: margin: '${theme.spacing(0)} !important'

Kizmar · 2019-11-01T17:46:39Z

Is there any movement on this? I'm getting more and more areas where I'm having to use !important, which is less than ideal.

oliviertassinari · 2019-11-01T17:53:15Z

@Kizmar We would be happy to accept a pull request for #16609 (comment).

OnkelTem · 2019-11-06T15:24:49Z

Having the same issue as in #16609 (comment) - i.e. Dev != Prod

A copy-paste:

/* Dev: */
.MuiCardHeader-root {
    display: flex;
    padding: 16px;
    align-items: center;
}
.makeStyles-statusBarOk-276 {
    color: #fff;
    background: #4e698c;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Prod: */
.jss276 {
    color: #fff;
    background: #4e698c;
    padding-top: 8px;
    padding-bottom: 8px;
}
.MuiCardHeader-root {
    display: flex;
    padding: 16px;
    align-items: center;
}

So the style 276 gets wrong priority. Any ideas how to fix this? Is there a way to provide the priority?

Material UI 4.2.0

oliviertassinari added the status: waiting for author Issue with insufficient information label Jul 15, 2019

oliviertassinari mentioned this issue Aug 9, 2019

CSS rules specificity is order dependent on chips #16374

Closed

2 tasks

oliviertassinari added the good first issue Great for first contributions. Enable to learn the contribution process. label Sep 6, 2019

joshwooding added the hacktoberfest https://hacktoberfest.digitalocean.com/ label Sep 30, 2019

This comment has been minimized.

Sign in to view

oliviertassinari added the priority: important This change can make a difference label Oct 24, 2019

joshwooding removed the hacktoberfest https://hacktoberfest.digitalocean.com/ label Nov 3, 2019

oliviertassinari self-assigned this Nov 6, 2019

oliviertassinari removed the good first issue Great for first contributions. Enable to learn the contribution process. label Nov 6, 2019

oliviertassinari mentioned this issue Nov 6, 2019

[core] Increase specificity to get correct style #18238

Merged

oliviertassinari closed this as completed in #18238 Nov 7, 2019

This comment has been minimized.

Sign in to view

CodySchaaf mentioned this issue May 14, 2020

Using the Box component with the clone attribute has inconsistent styling in production vs dev #21038

Closed

2 tasks

dehall mentioned this issue Jul 15, 2020

increase style priority mcode/pathway-builder#27

Merged

This comment has been minimized.

Sign in to view

oliviertassinari added package: styles Specific to @mui/styles. Legacy package, @material-ui/styled-engine is taking over in v5. v4.x labels Feb 19, 2021

compiled css precedence #16609

compiled css precedence #16609

Comments

Luucky commented Jul 15, 2019 • edited Loading

Expected Behavior 🤔

Current Behavior 😯

Steps to Reproduce 🕹

Your Environment 🌎

oliviertassinari commented Jul 15, 2019

Luucky commented Jul 16, 2019

oliviertassinari commented Jul 16, 2019 • edited Loading

Luucky commented Jul 16, 2019 • edited Loading

oliviertassinari commented Jul 16, 2019 • edited Loading

canhbk commented Jul 18, 2019

dfmartin commented Jul 31, 2019

nickpalmer commented Aug 28, 2019

oliviertassinari commented Aug 28, 2019

nickpalmer commented Aug 29, 2019

dva commented Sep 5, 2019

nickpalmer commented Sep 5, 2019 • edited Loading

dva commented Sep 6, 2019

kokill commented Sep 6, 2019 • edited Loading

oliviertassinari commented Sep 6, 2019

This comment has been minimized.

alexandrecanuto commented Oct 9, 2019 • edited Loading

netcoding87 commented Oct 10, 2019

This comment has been minimized.

Kizmar commented Oct 20, 2019 • edited Loading

Kizmar commented Nov 1, 2019

oliviertassinari commented Nov 1, 2019

OnkelTem commented Nov 6, 2019 • edited Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

Luucky commented Jul 15, 2019 •

edited

Loading

oliviertassinari commented Jul 16, 2019 •

edited

Loading

Luucky commented Jul 16, 2019 •

edited

Loading

oliviertassinari commented Jul 16, 2019 •

edited

Loading

nickpalmer commented Sep 5, 2019 •

edited

Loading

kokill commented Sep 6, 2019 •

edited

Loading

alexandrecanuto commented Oct 9, 2019 •

edited

Loading

Kizmar commented Oct 20, 2019 •

edited

Loading

OnkelTem commented Nov 6, 2019 •

edited

Loading