O'Reilly logo

Cross-platform Desktop Application Development: Electron, Node, NW.js, and React by Dmitry Sheiko

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

React-MDL

Previously, while working on Screen Capturer, we examined the component library Material UI. That's not the only implementation of material design available for React. This time, let's try another one--React MDL (https://react-mdl.github.io/react-mdl/). So, we install the library and the accompanying declarations:

npm i -S react-mdl 
npm i -D @types/react-mdl 

According to the documentation, we enable the library via imports:

import "react-mdl/extra/material.css"; 
import "react-mdl/extra/material.js"; 

Oh! Oh! Webpack won't be able to resolve the CSS module until we configure it accordingly. First, we have to tell Webpack to look for react-mdl/extra/material.css and react-mdl/extra/material.js in the node_modules directory:

 ./webpack.config.js ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required