Add official support for createStyled?

[gnapse]

I was wondering if this library could provide (or if it already does) a component that would allow to use styles with a render prop pattern, instead of the withStyles HOC.

I searched for it, and the best I could find was this, but that's not quite what I would've expected. That option would need users of this api to create a new component every time:

import { createStyled } from '???';

const Styled = createStyled({ /* styles go in here */ })

// It is supposed to be used like this:
render() {
  return (
    <Styled>
      {({ classes }) => (
        // render your thing here
      )}
    </Styled>
  );
}

I wonder if it would be a bit better or even possible to have a generic component that receives styles and provides classes, instead of having to create one component tied to specific styles:

// would be something provided by this lib
import Styled from 'material-ui/Styled';

const styles = { /* styles go in here */ }

// Then use it like this:
render() {
  return (
    <Styled styles={styles}>
      {({ classes }) => (
        // render your thing here
      )}
    </Styled>
  );
}

Also, as a side note, even if this suggestion is not accepted, I wonder why the createStyled helper is not provided as an export of this library, just as withStyles is.

[oliviertassinari]

@gnapse Is it a duplicate of #7633?

[gnapse]

@oliviertassinari at a quick glance it does not seem so. The title of that issue is not immediately suggesting of having anything to do with a render props, the phrase "render prop" does not appear anywhere in that page, and I do not see any single code example showing a render prop pattern to access classes.

[oliviertassinari]

@gnapse Ok thanks. Going back to your suggestion.

I wonder if it would be a bit better or even possible to have a generic component that receives styles and provides classes, instead of having to create one component tied to specific styles:

I fear the Styled component has to be created outside of the render method so the CSS injection order is correct. It's a technical limitation. I can't think of a simple workaround. You will find styled-components relying on the same solution.

[gnapse]

Ok, yes, I totally get it.

Now again, back to my fallback suggestion here: why createStyled (as it appears here) isn't provided by this library out of the box, just as withStyles is?

[oliviertassinari]

why createStyled (as it appears here) isn't provided by this library out of the box, just as withStyles is?

@gnapse The initial motivation was: it's working, but it's an extra API to support. Let's document it and see how it's used in the wild. Now, as people start using it and rely on it in production with no issue, I'm more confidence integrating it into the core. I have no real objection to it. It just hasn't been a priority so far. You know, extending the API comes with overhead: documentation, tests, maintenance, etc.

[gnapse]

Yes, sure. I get your point. Thanks for your input on this.

[oliviertassinari]

@gnapse I'm reopening as it's a good question. I don't have a definitive answer.

[oliviertassinari]

@jcoreio Has published the package under https://github.com/jcoreio/material-ui-render-props-styles. Maybe we could document it?

At some point, it might be good to move @material-ui/core/styles into its own package: @material-ui/styles.

[oliviertassinari]

I have added material-ui-render-props-styles of @jedwards1211 in the documentation with #11983. This should do it for now :).

[jedwards1211]

Awesome, thanks! I guess I don't get notifications for jcoreio for some reason

[jedwards1211]

Let me know if you want to move it to the @material-ui npm organization.

[oliviertassinari]

@jedwards1211 Sure, I will let you know if we want to move the project into the npm organization.

[gnapse]

This is awesome. Thanks!

[rosskevin]

Just an FYI - @oliviertassinari we had a createStyled as part of our internal ui lib, reused in several apps. It presents load order issues, but copying the createStyled.ts to the app src alleviates the issue. Definitely a tricky one. I am not sure how the linked project could be making this work - I suspect it will have the same potential problem.