search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.45k stars 31.85k forks source link

`width` is too common of a prop name for withWidth, can we make this prop name customizable? #11952

Closed w9 closed 5 years ago

w9 commented 6 years ago

withWidth is a fantastic helper for building a markup structure that's responsive to the screen size. Currently, the prop supplied has a fixed name "width". Unfortunately, this name is extremely common in existing React components, and since the name "width" is currently hard-coded, there's no way to change it.

Skaronator commented 6 years ago

muiWidth would be a good name IMO.

franklixuefei commented 6 years ago

IMO this is a good issue. This actually reminds me of something related to HOC vs Render-Props pattern. This issue is a classic example of Naming Collision

Naming collisions. Two mixins that try to update the same piece of state may overwrite one another. The createClass API included a check that would warn you if two mixins had a getInitialState value with the same keys, but it wasn’t airtight.

https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce

Perhaps in the future, we can start gradually trying out render props pattern as a replacement of HOC

oliviertassinari commented 6 years ago

@w9 It's funny, you have a track record of using conflicting property names: https://github.com/cssinjs/theming/issues/47. We could definitely allow people to change the property name. Still, does it worth the effort when users control the properties name?

Perhaps in the future, we can start gradually trying out render props pattern as a replacement of HOC

@franklixuefei We have started documenting this pattern in https://material-ui.com/customization/css-in-js/#render-props-api-11-lines-. I think that documenting how to use the HOC as a render propertry would definitely be a good first step!

Also, considering withStyles, withWidth & withTheme have the same signature, we could make a factory to generate Render Prop components out of these HOCs (but given the simplicity of the approach, we might not need such abstraction, sometimes, it's better to repeat itself for a code easier to understand).