How to make application layout with material-components-web-react?

[jimbojetlag]

Is the application layout:

1. available now in material-components-web-react?
2. something left to material-components-web, even when building apps with material-components-web-react?
3. going to be implemented later in material-components-web-react?

If it's 3, what is a good way of building the layout when starting with material-components-web-react now?

[moog16]

@jimbojetlag are you talking about https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid?

[jimbojetlag]

@moog16 That's right. Would there be a React wrapper for that, or should material-components-web-react users use mdc-layout-grid directly?

[moog16]

For the time being I would use MDC Web's Layout grid. We are deprioritizing CSS-only components, and focusing on the larger JS-centric components.

[devxpy]

How about this?

Its a wrapper over MWC.

[jimbojetlag]

@devxpy It's probably not a good idea to use multiple React wrappers for MDC at the same time.

[moog16]

@devxpy I do like RMWC's implementation, and when we get to that component will do something similar.

I wouldn't mix MDC React's JS components with RMWC's components, since RMWC uses HTML events while MDC React is using React Synthetic events. I tried it to see if it was possible, and there are some compatibility issues. If you try it please share your findings.

[devxpy]

I was a little disappointed when I discovered that I need to use SASS for simple margin/gutter modification.

Can we provide an abstraction over it, as props maybe?

[devxpy]

Haven't tried mixing components..

[moog16]

@devxpy MDC Web has the prebuilt CSS, so you don't have to import SASS. Will that work for you?

[devxpy]

Just noticed it. Thanks!

[moog16]

Closing as we will revisit building out this component in the future

[devxpy]

@moog16.
No, it doesn't.

You actually have to use a custom webpack config to use the SASS stuff.

This makes it INCOMPATIBLE with create-react-app.

See this issue, regarding the need for custom webpack config.

See this feature request to make sass optional.

Since the gutters/margin (and a lot of styling) is controlled using SASS mixin, how do you propose to handle that?

[moog16]

@devxpy true, that layout grid needs Sass to be customized. I wrote a doc on how to integrate create-react-app with Sass: https://github.com/material-components/material-components-web-react/blob/master/docs/getting-started.md#step-2-using-sass. Does this help you?

[jimbojetlag]

@moog16 Unfortunately the method in your guide requires ejecting create-react-app. Ejecting CRA really defeats the purpose of using it.

Is there a more clean way of starting a web app with a customized material-components-web-react? The barrier for just starting a project with this library seems to be too high.

[moog16]

@jimbojetlag I actually tried the recommended way found on the create-react-app site. So that will actually work. I can work on updating that doc to recommend their way before ejecting.

[jimbojetlag]

@moog16 Can I ask why the guide says that using node-sass-chokidar won't work?

By the way CRA 2.0 will have sass support out of the box.

[moog16]

@jimbojetlag originally it was the way I was using it. Did you get it working too? The trick for me was to import the .scss files from within App.scss.

[moog16]

@jimbojetlag Please see if this suffices: https://github.com/material-components/material-components-web-react/pull/94/files.

[jimbojetlag]

@moog16 Thank you for the prompt update.

Importing external .scss files in App.scss is the sass way. Of course, this is not aligned with React's philosophy of composition. Styled component would be a more natural fit for styling in React, but I'm not sure how that would play with importing and customizing MDC Web styles.

Your commit looks good to me, only a minor point: You should be able to use the absolute path @import "@material/react-button/index"; instead of @import "../node_modules/@material/react-button/index";.

[moog16]

@jimbojetlag thanks for the input. You're correct. I update the PR to reflect your suggestions. Good call!