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

[w9]

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.

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

[Skaronator]

muiWidth would be a good name IMO.

[franklixuefei]

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]

@w9 It's funny, you have a track record of using conflicting property names: cssinjs/theming#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).