MDC React

Material Components Web implemented in React.

Setup

Install the library using npm:

npm i mdc-react

If you plan on using the Sass files, you'll also need to install sass:

npm i -D sass

NOTE: MDC React (as well as MDC Web) uses the new Sass Module System. Unfortunately at this time the node-sass implementation does not support it. Please use the sass library.

Icons

To use Material Icons include them in your HTML:

<linkhref="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">

Symbols (NEW)

To use Material Symbols include them in your HTML:

<linkhref="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

The above snippet includes the default configuration for each axis, with weight at 400, optical size at 48, grade at 0 and fill (also 0.)

To configure the symbols follow the developer guide.

Usage

JS

To use the components just import what you need from the library:

import{Button}from'mdc-react';constApp=()=>{return(<div><Button>Click me!</Button></div>);};

Alternatively you can import only the components you need:

importButtonfrom'mdc-react/button';importTypographyfrom'mdc-react/typography';constApp=()=>{return(<div><Typography>Hello world!</Typography><Button>Click me!</Button></div>);};

Sass

You can use all the styles:

@use'path-to-node_modules/mdc-react';

or only the ones you need:

@use'path-to-node_modules/mdc-react/src/button';
@use'path-to-node_modules/mdc-react/src/typography';