[Reboot] New component

[oliviertassinari]

Closes #9641

cc @mui-org/core-contributors

[kgregory]

Yes!

[kgregory]

Great idea

[mbrookes]

Nice idea, not sure about the name though... Perhaps Reset? (Or am I being too literal?! 😕)

[oliviertassinari]

Perhaps Reset

@mbrookes http://getbootstrap.com/docs/4.0/content/reboot/

[oliviertassinari]

Once it's released, we can update the examples.

[mbrookes]

@oliviertassinari Actually, if this were a standalone project "Reboot" is a bit more catchy - it was just that most things in MD (so by extention in MUI) are named more literally, but that's cool.

[mbrookes]

'Font antialiasing is enabled'

[pelotom]

Great idea!

[pelotom]

I'm curious, is there a reason to prefer this approach over simply

*, *::before, *::after {
  box-sizing: border-box;
}

?

[oliviertassinari]

@pelotom This way, people can change the inherited value anywhere and propagate it down the tree. @nathanmarks Introduced this pattern. As far as I remember, Google Map was all broken with box-sizing: border-box;. Bootstrap approach (the one you are suggesting) was making it harder than necessary to go back to box-sizing: content-box;.

[oliviertassinari]

What do you think?

[pelotom]

Interesting, I didn't know about that, but it makes sense.

[oliviertassinari]

However, this approach is making it harder to cherry-pick a different box-sizing on a single element.

[oliviertassinari]

So it's about cherry-picking vs, omg, it doesn't play well with this third party library.

[oliviertassinari]

I have no idea what's best. Such a hard tradeoff 🤔 .

[oliviertassinari]

I will benchmark. copying is often the best thing to do. I do it everyday.

[pelotom]

You could always add a prop which controls which approach you want to use.

[oliviertassinari]

@pelotom It seems it's Bootstrap vs everybody else.

• Us
• https://developer.microsoft.com/en-us/fabric#/components/checkbox
• http://blueprintjs.com/docs/#core/typography
• https://semantic-ui.com/usage/theming.html

I will keep it this way. In the future, we can add a property if people ask for it with a solid use case :).

[pelotom]

Since I imagine a common pattern will be

<MuiThemeProvider theme={theme}>
  <Reboot />
  <MyApp />
</MuiThemeProvider>

or similar, would it make sense to provide a convenience boolean prop on MuiThemeProvider to accomplish the same, i.e.

<MuiThemeProvider theme={theme} reboot>
  <MyApp />
</MuiThemeProvider>

?

[oliviertassinari]

to provide a convenience boolean prop on MuiThemeProvider to accomplish the same, i.e.

@pelotom Adding the reboot boolean property will make people no using the component pay the import price of the module in their bundles. Also, it will just save people one import.

[pelotom]

Good points 👍