Loading Muicss styles in React js

user_2465609 0
Viewed 812

Im trying to setup an app using Muicss for styling my components in a React js app.

Below is the code of a very simple example but when I go to my browser the button has no style in it, and I don't know if I'm missing something, I used Material Design before and I had no issues.

import React from 'react';
import Button from 'muicss/lib/react/button';

export default class Example extends React.Component {
  render() {
    return (
      <div>
          <Button variant="raised" color="danger">button</Button>
      </div>
    );
  }
}

Can someone help me to get if I'm missing something, I installed the library using NPM and inside my node_modules folder I can see all the files from the Muicss library.

In the console there's no error or something weird, the weird thing is that the components have no styles...

enter image description here

enter image description here

material-design reactjs css javascript
3 Answers

To use MUI React you must include the MUI CSS file in your HTML payload. It can be compiled into your app's CSS or added from the CDN:

<link href="//cdn.muicss.com/mui-0.9.30/css/mui.min.css" rel="stylesheet" type="text/css" media="screen" />

(source: MUICSS documentation)

user_12531560

I know this is old and as it doesn't mention it for future reference for passers-by it can be imported into scss using @import url("//cdn.muicss.com/mui-0.10.1/css/mui.min.css");

user_90392410

Muicss version: 0.10.2

Using the solution of Muicss Docs is ok but not well, because when a developer update muicss and do not update the given link, everything maybe ruins, now with the below solution it became very very better.

I have the same issue and fix it by adding sass-loader to Webpack and also I have CSS Modules so in the root of styles of my project I write just like below:

/* root file of styles.scss */

:global {
  @import 'node_modules/muicss/lib/sass/mui';
}

After using this solution, even with hashed class name by using CSS Modules I gave the global names of muicss and every component works well.

user_68777990
Related