- Full-Stack React Projects
- Shama Hoque
- 155字
- 2021-06-25 21:45:13
Material-UI
In order to keep the UI in our MERN applications sleek without delving too much into UI design and implementation, we will utilize the Material-UI library. It provides ready-to-use and customizable React components that implement Google's material design. To start using Material-UI components to make the frontend, we need to install the following modules:
npm install --save material-ui@1.0.0-beta.43 material-ui-icons
At the time of writing, the latest pre-release version of Material-UI is 1.0.0-beta.43 and it is recommended to install this exact version in order to ensure the code for the example projects do not break.
To add the Roboto fonts as recommended by Material-UI, and use the Material-UI icons, we will add the relevant style links into the template.js file, in the HTML document's <head> section:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
With development configuration all set up, and the necessary React modules added to the code base, we can now start implementing the custom React components.