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.

[CssBaseline] Allow css baseline to be restricted to a div

See original GitHub issue

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

Summary 💡

Add a prop “rootId” on the CssBaseline to apply the baseline css only on the div with the rootId id

Examples 🌈

<html>
    <body>
        <div id="root"></div>
    </body>
</html>

<CssBaseline rootId="root" />

This would inject something like this:

#root: {
        WebkitFontSmoothing: 'antialiased', // Antialiasing.
        MozOsxFontSmoothing: 'grayscale', // Antialiasing.
        // Change from `box-sizing: content-box` so that `width`
        // is not affected by `padding` or `border`.
        boxSizing: 'border-box',
         color: theme.palette.text.primary,
        ...theme.typography.body2,
        backgroundColor: theme.palette.background.default,
        '@media print': {
          // Save printer ink.
          backgroundColor: theme.palette.common.white,
        },
        // Add support for document.body.requestFullScreen().
        // Other elements, if background transparent, are not supported.
        '&::backdrop': {
          backgroundColor: theme.palette.background.default,
        },
      '*, *::before, *::after': {
        boxSizing: 'inherit',
      },
      'strong, b': {
        fontWeight: 'bolder',
      },
}

Motivation 🔦

IMO this could be useful to help work in isolation. For example you want to integrate some mui components in a non-react website. This would allow to use the cssbaseline only on the part using the react components without the risk of breaking the website

Issue Analytics

State:
Created 4 years ago
Comments:7 (7 by maintainers)

Top GitHub Comments

1reaction

oliviertassinaricommented, Feb 11, 2020

@TomPradat This sounds fair. However, I think that a simple flag would be enough (so the style apply applies to the children).

0reactions

oliviertassinaricommented, Feb 11, 2020

Yes, exactly. For the prop, we could name it scopeToChildren? Or a shorter name?

Top Results From Across the Web

[CssBaseline] Allow css baseline to be restricted to a div #19657

I have searched the issues of this repository and believe that this is not a duplicate. Summary 💡. Add a prop "rootId" on...

CSS Baseline - Material UI - MUI

The CssBaseline component helps to kickstart an elegant, consistent, and simple baseline to build upon.

CSS Baseline: The Good, The Bad And The Ugly

Establishing a standard where, for example, headers always have two baselines of white space below them, and the padding of every box always ......

React JS: Apply Material-UI CssBaseline - Stack Overflow

The cssBaseline offered by Material-UI seems to check all the boxes, so I want to give it a try. The thing is, surprise,...

8 phases of the moon

Code; Issues 1.1k; Pull requests 144; Discussions; Actions; Projects 1; Security; Insights ... [CssBaseline] Allow css baseline to be restricted to a div...