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.

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

[docs] Styled API Example (5 lines) #11620

Merged
merged 3 commits into from
May 29, 2018

Conversation

mssngr
Copy link
Contributor

@mssngr mssngr commented May 29, 2018

Was implementing the styled-components API example, but I needed to be able to set classes to the various sub classes in many of material-ui's components (such as paper in the Drawer component.) I then realized the API example could be written much more simply while giving it that extra bit of functionality. Decided to do a PR, since it worked so well for me.

  • Reduces styled-components API example down to 5 lines
  • Adds classes functionality to the styled-components API example
  • Updates the documentation to reflect these changes
// Yes, 5 lines of code, it's all you need.
const styled = Component => (style, options) => {
  const StyledComponent = props => <Component {...props} />;
  const styles = typeof style === 'function' ? theme => ({ ...style(theme) }) : { ...style };
  return withStyles(styles, options)(StyledComponent);
};

@oliviertassinari
Copy link
Member

oliviertassinari commented May 29, 2018

@mssngr Thanks for the pull-request.

I then realized the API example could be written much more simply while giving it that extra bit of functionality

But it's no longer following the styled-components API. I mean, it's introducing an important difference. Also, this doesn't work for styling the native dom elements. The classes.root need to be applied as a className. The current API ask for the same "hack" than with styled-components: https://material-ui.com/guides/interoperability/#styled-components. I'm not convinced documenting your version would be a better default, while it's definitely interesting.

@oliviertassinari oliviertassinari changed the title Styled API Example (5 lines) [docs] Styled API Example (5 lines) May 29, 2018
@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation label May 29, 2018
@oliviertassinari oliviertassinari merged commit 0d8e22a into mui:master May 29, 2018
@mssngr
Copy link
Contributor Author

mssngr commented May 29, 2018

Good feedback, thanks! And, I don't know how I missed that page of the documentation. I've gotta rethink my styling strategy, now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants