How to import CSS toolkit supplied by MaterialUI (MUI)

user_19144656 0
Viewed 68

I have used MUI on my website. While playing with the devtools I saw many class associated with the MUI components.

Does MUI have CSS for its default components like Menu? The layout I have with the MUI component lacks organization.

Something like

import '@mui/dist/mui.css';

as this doesnot work.

material-ui reactjs
1 Answers

This documentation page from MUI provides your answer and more. https://www.muicss.com/docs/v1/react/introduction

After installing it with npm (or other package manager)

 npm install --save muicss

You can import either individual components as shown in the documentation

// Access all components from `muicss/react` module
import { Appbar, Button, Container } from 'muicss/react';

// Access components individually for smaller build files (RECOMMENDED)
import Appbar from 'muicss/lib/react/appbar';
import Button from 'muicss/lib/react/button';
import Container from 'muicss/lib/react/container'

Or as per your use case you can import the various css files provided in the node module directly. For example

import 'muicss/css/mui.css

Or it appears that they also provide sass

import 'muicss/lib/sass/mui/*the_component_you_want*'

The MUICSS package appears to be designed for a la carte use of components so If you're using the MUI 'framework' you may want to consider a way to avoid bloat when importing/installing from both packages.

user_50405890
Related