Including a css file in a React project - reactjs

Question

I am trying to use material UI with react.
On this website: https://jamesmfriedman.github.io/rmwc/installation
It says
material-components-web should be installed automatically as a peer dependency. Include node_modules/material-components-web/dist/material-components-web.min.css in your project via your method of choice (using a link tag, a css-loader, etc.).
But I am not sure what this actually means. How and where do I have to import that file to use this library?

Answer 1

At first, you should add the library to your project by running:
npm install --save rmwc or yarn add rmwc
Secondly, you should understand the following:
Generally speaking, Material Components Web library is actually a bunch of prebuilt design styles that you can link to your project to make it look Material.
The library that you are using, React Material Web Components [RMWC], is a React wrapper for the previous library. It means that it gives you a set of flexible React Components like <Button />, <TextField />, etc that are built in React and act in a virtual DOM.
It doesn't give any specific styling to the elements. Moreover, it is designed not to provide you any extra styling. To make your imported React components look Material, you should add the styling from the parent library [Material Components Web].
To add styling from that library, use the following:
Add it to your project:
npm install material-components-web or yarn add material-components-web
And then use the following line (use it once in your project):
import 'node_modules/material-components-web/dist/material-components-web.min.css';

Answer 2

RMWC does the ReactJS wrapping. The styling is still all done by MDC.
You can add the minified mdc css file to your project, but that will not give you much customization. I'd advise using sass for your project and importing that mdc modules there. This way you can change variables e.g. from primary color as explained here: https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme
$mdc-theme-primary: #fcb8ab;
$mdc-theme-secondary: #feeae6;
$mdc-theme-on-primary: #442b2d;
$mdc-theme-on-secondary: #442b2d;
#import "#material/button/mdc-button";
A more in depth documentation on how to use styling specifically with RMWC can be found in the docu: https://jamesmfriedman.github.io/rmwc/styling
But overall you can either create your own classes you then apply to your elements such as buttons. E.g.
.my-button-style {
border-radius: 10px;
}
Or you override the mdc classes directly.
.mdc-button {
border-radius: 10px;
}
The mdc classes can be found in each of the package sites on GitHub. (e.g. for button: https://github.com/material-components/material-components-web/tree/master/packages/mdc-button)