Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ScopedCssBaseline] The box-sizing style of the child components is overwritten

See original GitHub issue

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 😯

ScopedCssBaseline is setting box-sizing: 'inherit' for all child components. -> souce
The above takes precedence over CSS classes which generated by material-ui itself (like .MuiInputBase-input ).
Therefore, the default box-sizing of material-ui not being used.

Expected Behavior 🤔

.MuiInputBase-input should be used as precedence over box-sizing: 'inherit' like CssBaseline.

Steps to Reproduce 🕹

https://codesandbox.io/s/the-box-sizing-style-of-the-child-components-is-overwritten-htv0c

Steps:

Please check box-sizing of each element.

Context 🔦

Do not have to set box-sizing to each component.
Use Material-UI default styles easier under ScopedCssBaseline like CssBaseline.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.9
React	v16.13.1
Browser	chrome 80.0.3987.149

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:22 (20 by maintainers)

Top GitHub Comments

1reaction

oliviertassinaricommented, Apr 11, 2021

Questions

With @emotion/react rules are injected when rendering so it somewhat depends on the render order.

Ok, this is what I recall @mnajdova saying.

Not sure how SC works exactly without double-checking that but I would imagine they might work similarly

@Andarist From what I understand, at the styled() creation time, an injection order is reserved:

Global CSS vs. styled

I have also noticed that they enforce the global style to always be injected first in SC:

https://github.com/styled-components/styled-components/blob/404190e26062133a7b916d73c1d52312db20bc92/packages/styled-components/src/models/GlobalStyle.js#L19

I recall looking into https://github.com/emotion-js/emotion/issues/2213, it seems that emotion does the same as SC. Global CSS are injected first: https://codesandbox.io/s/emotion-issue-template-forked-31990?file=/src/index.js:0-639.

Alternative solution

I had also considered solving this issue by using <Global> instead of styled() to leverage the CSS injection order, but we would need to add a unique class name to be stable during the hydration. Maybe we could have a default and ask developers to provide their own id if they want to use multiple ScopedCssBaseline with a different theme. Actually, maybe it’s good enough, cc @mnajdova.

Is this issue important?

Not really. We can defer it post v5.

1reaction

oliviertassinaricommented, Apr 2, 2021

@mnajdova Both CssBaseline and ScopedCssBaseline are using the styled API since very recently.

Top Results From Across the Web

[ScopedCssBaseline] The box-sizing style of the child ... - GitHub

[ScopedCssBaseline] The box-sizing style of the child components is overwritten #20461. Open.

ScopedCssBaseline in material ui overrides box-sizing of ...

I'm trying to make use of ScopedCssBaseline, but its behavior is different from CssBaseline. ScopeCssBaseline add styles to input:

CSS Baseline - Material UI - MUI

It's possible to apply the baseline only to the children by using the ScopedCssBaseline component. import * as React from 'react'; import ScopedCssBaseline...

@mui/material | Yarn - Package Manager

React components that implement Google's Material Design. ... MUI Core contains foundational React UI component libraries for shipping new features faster.

Inheriting box-sizing Probably Slightly Better Best-Practice

.component { /* designed to work in default box-sizing */ /* in your ... But as long as we're promoting a “best practice”...