Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
1 task done
TomPradat opened this issue Feb 11, 2020 · 7 comments · Fixed by #19669
Closed
1 task done

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

TomPradat opened this issue Feb 11, 2020 · 7 comments · Fixed by #19669
Labels
component: CssBaseline The React component new feature New feature or request ready to take Help wanted. Guidance available. There is a high chance the change will be accepted

Comments

@TomPradat
Copy link
Contributor

  • 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
@oliviertassinari
Copy link
Member

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

@oliviertassinari oliviertassinari added the component: CssBaseline The React component label Feb 11, 2020
@TomPradat
Copy link
Contributor Author

I can work on this if you want

@oliviertassinari
Copy link
Member

@TomPradat Yes :)

@oliviertassinari oliviertassinari added ready to take Help wanted. Guidance available. There is a high chance the change will be accepted new feature New feature or request labels Feb 11, 2020
@TomPradat
Copy link
Contributor Author

I'm not sure a flag is sufficient as we do not wrap the code with the CssBaseline element. Moreover I'd rather not add a div element in the CssBaseline.

What about a restrictTo prop ?

<CssBaseline restrictTo="#root" />

@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 11, 2020 •
edited
Loading

What's the issue with wrapping the root of the tree? Also, I think that in the current state of affairs, we should avoid to use style function in the core components.

@TomPradat
Copy link
Contributor Author

TomPradat commented Feb 11, 2020 •
edited
Loading

I'm not sure I understand you correctly, are you suggesting something like this ?

// App.jsx
const App = () => (
    <CssBaseline applyOnlyOnChildren>
         <RestOfTheApp />
    </CssBaseline>
);

@oliviertassinari
Copy link
Member

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

@TomPradat TomPradat mentioned this issue Feb 12, 2020
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: CssBaseline The React component new feature New feature or request ready to take Help wanted. Guidance available. There is a high chance the change will be accepted
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[ScopedCssBaseline] Allow css to be only applied on children TomPradat/material-ui
2 participants
@oliviertassinari @TomPradat