What's the recommended way of using material-components-web-react components? about material-components-web-react HOT 12 CLOSED

I am using button successfully in a project with react and sass.

I am using webpack.

The first step was modifying my Webpack configuration to allow es6 module imports from the material packages into my bundle. Here's a snippet of my server-side rules:

      // other rules
      {
        test: /node_modules\/@material\/.*\/.*\.js$/,
        loader: 'babel-loader',
        options: {
          presets: [
            ['env', {
              debug: true,
              targets: { browsers }
            }],
            'react'
          ],
          plugins: [
            'transform-class-properties',
            'transform-object-rest-spread'
          ]
        }
      }

I needed to add the transform-class-properties and transform-object-rest-spreadplugins to the babel configuration for that rule because the material source code used that syntax and I wasn't previously using it.

The other step is allowing the sass to import in from node_modules. Here's my sass-loader:

// sass-loader used in webpack.config.js rules
const sassLoader = {
  loader: 'sass-loader',
  options: {
    includePaths: ['./node_modules']
  }
}

Some of the sass errors really didn't point my towards solutions. I am currently perplexed about how to make the example code given for the top-app-bar to correctly build styles for the icon fonts 🤷‍♂️

from material-components-web-react.

@jimbojetlag I cannot guarantee anything as it this project is in alpha similar to MDC Web. But from my standpoint it doesn't make sense that MDC React will have differing styles. The goal of this project is to share as much code (Foundation JS & CSS) from MDC Web, effectively making MDC React a mirror of MDC Web's components. We currently follow this pattern and have no extra styles. The exception being Material Icon, but that is not an MDC Web component.

Short answer: you can expect MDC React to NOT have extra styles in addition to MDC Web's styles.

from material-components-web-react.

Also created this issue to create a getting started: #67

from material-components-web-react.

@johnelliott thanks, how do you use sass styles? Do you use styled components, or do you use styles in javascript?

Does the use of sass in this library mean that the authors have an opinionated way when using the library?

Perhaps this needs to be documented.

from material-components-web-react.

Take another look around the guide here in the main codebase for how this works. It’s not documented in this repository.

from material-components-web-react.

That guide is not specifically for React. When it comes to styles, most React libraries have an opinion about the styles approach. It is not clear to me which approach is preferred for this library.

from material-components-web-react.

The reason it's not here is that it's not related to react.

Each of these components needs styles and has an index.scss file. That's the one you need to import along with the javascript for the module. Does that make sense?

from material-components-web-react.

Yes, that makes sense. But my point is something else. For example, create-react-app projects do not support importing sass files or some ES6 syntax by default, at least not until v2 is out.

There is a recent commit which transpiles ES6 to ES5 and sass to css, but it is not known to me how to customize the theme when importing css, as customizing by sass will be lost.

Ant Design React library ha s a detailed guide about how to use the library with create-react-app: https://ant.design/docs/react/use-with-create-react-app. I was hoping something similar could exist for this project to get a new user started without giving them even more decision fatigue in recent javascript world.

from material-components-web-react.

I was thinking that the #usage sections in each Readme would be enough documentation for now: https://github.com/material-components/material-components-web-react/tree/master/packages/button#usage.

Customizing is similar to MDC-Web. Our intent was to reuse the Sass mixins we've built in MDC-Web documented here.

We've included the Sass within each package. However since we didn't compile the Sass into CSS, it might be easier to include the MDC-Web Sass/CSS files as necessary. So it looks like something like this:

// Buttons need ripple and button styles
import '@material/ripple/mdc-ripple.scss';
import '@material/button/mdc-button.scss';

...

Until we roll out V2, this will have to be the work around.

from material-components-web-react.

@moog16 are you suggesting that the when using material-components-web-react, sass imports should come directly from material-components-web? Will it be guaranteed that in the future the sass files in material-components-web-react will not have extra styles?

from material-components-web-react.

@jimbojetlag what do you mean extra styles? Do you mean duplicate?

from material-components-web-react.

@moog16 I don't mean duplicate, I mean any styles in addition to material-components-web styles that might have to be necessary for the React wrapper element to function.

from material-components-web-react.