Material-ui: Box clone not overriding child component styles

[amakk]

I'm using Box with the clone property (https://material-ui.com/components/box/#overriding-material-ui-components) and I'm seeing that the Box styles get overridden by the component's styles.

I've confirmed that Box is imported last in the file, but its styles are still not taking precedence. I tried to replicate it in a minimal repo, but it is working there, and I'm not able to narrow down to what is breaking the functionality because it's not consistent - sometimes it works, sometimes it doesn't. I'd like to provide information to track down this issue

I'm using Gatsby and the Gatsby plugin for Material UI, if that helps.

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

Expected Behavior 🤔

The box CSS should take precedence over the child component class.

Current Behavior 😯

The child component CSS is taking precedence.

Here are my imports:

Here is my usage of box:

Here is the CSS that's generated, as you can see the box class has lower precedence

Steps to Reproduce 🕹

I'm not able to create a repository that reproduces this issue. I started with the example gatsby starter and pasted a lot of my code into it, and got it to a point where it wasn't working. Then I started removing code to see how to minimize the example, and it started working again. When I undid the changes, it continued working, so I'm not able to reproduce this bug consistently.

If anyone has some ideas what it could be, or what I could try, I would appreciate it. At this point I'm really stuck, but would like to work with someone to resolve the issue.

https://codesandbox.io/s/hardcore-resonance-by6zt

Context 🔦

I'm trying to use box to override styles on another component. Would really like to have this functionality working.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.0.1 |
| React | v16.8.6 |
| Browser | Chrome v74.0.3729.157 | (tried in Safari and Firefox also)
| TypeScript | N/A |
| Gatsby | 2.7.3 |

[oliviertassinari]

@amakk We can't help without a reproduction.

[oliviertassinari]

@kptlronyttcna thanks for the reproduction. When using the clone prop, the order in which the elements are imported is important:

This works:

import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";

This doesn't work:

import Box from "@material-ui/core/Box";
import Typography from "@material-ui/core/Typography";

[kptlronyttcna]

Hmm, It appears that

this works:

import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";

but this does not:

import { Typography } from "@material-ui/core";
import Box from "@material-ui/core/Box";

In both cases Box is imported last (to see it in codesandbox I had to manually refresh the preview window)

[amakk]

Has anyone had a chance to look into this?

In the mean time, what I have done is copied the Box component and increased specificity of CSS generated by Box. Here is the implementation, in case it's helpful for others having this issue:

import {
  borders,
  compose,
  css,
  display,
  flexbox,
  palette,
  positions,
  shadows,
  sizing,
  spacing,
  typography
} from '@material-ui/system'
import { styled } from '@material-ui/styles'

const innerStyleFunction = css(
  compose(
    borders,
    display,
    flexbox,
    positions,
    palette,
    shadows,
    sizing,
    spacing,
    typography
  )
)

const styleFunction = props => ({
  '&&': innerStyleFunction(props)
})

const Box = styled('div')(styleFunction, {
  name: 'MuiBox'
})

export default Box

[oliviertassinari]

Moving to #15561

[satazor]

Adding to @amakk suggestion, we should do this:

styleFunction.filterProps = innerStyleFunction.filterProps;

so that Box doesn't inject unknown properties to the DOM.