Only use the CSS of Material UI React Components

Question

Material UI is a set of React Components that implement Google's Material Design in the best way I have seen so far.

Now I have a project where I am unfortunately not able to use React.js. But I want to use the great CSS the project includes.

Is there any way to embed the styles into my existing project?

Answer 1

I don't know exactly if this implements the exact same components of the material ui framework, but I've used it for apps that require material design and it seems to be what you are looking for. Also from looking at the source of Material UI there seems to be no easy way to extract the stylesheets.

https://www.muicss.com/

Hope this helps

Answer 2

• the performance (especially on mobile devices) is rather poor because the most of animations are stateful and require communication with the JS thread.
• due to inline styles, mobile support and responsiveness in general are lacking, see here
• Material UI has no CSS, all styles are Inline. HTML generated for single Floating Action Button (with plus icon) looks like:

<button style="border:10px;background:none;box-sizing:border-box;display:inline-block;
  font:inherit;font-family:Roboto, sans-serif;tap-highlight-color:rgba(0, 0, 0, 0);
  cursor:pointer;text-decoration:none;outline:none;transform:translate3d(0, 0, 0);
  vertical-align:bottom;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  position:relative;height:56px;width:56px;padding:0;overflow:hidden;
  background-color:#ff4081;border-radius:50%;text-align:center;-webkit-appearance:button;" 
        tabindex="0" type="button" data-reactid=".0.1.0.0.1.1.1.0.0">
  <div data-reactid=".0.1.0.0.1.1.1.0.0.0">
    <div style="transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; top: 0px;" 
         data-reactid=".0.1.0.0.1.1.1.0.0.0.1">
      <svg style="display:inline-block;height:56px;width:24px;transition:all 450ms 
        cubic-bezier(0.23, 1, 0.32, 1) 0ms;line-height:56px;fill:#ffffff;color:#ffffff;
        -webkit-user-select:none;" viewBox="0 0 24 24" data-reactid=".0.1.0.0.1.1.1.0.0.0.1.1:$/=10">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" data-reactid=".0.1.0.0.1.1.1.0.0.0.1.1:$/=10.0">
        </path>
      </svg>
    </div>
  </div>
</button>

Answer 3

To provide context for previous contribution:

• "Material UI has no CSS, all styles are inline"
  • inline styles means hard to manage and no CSS caching either
• "not mobile friendly"
  • Sometimes "ripple" animation fires twice on mouse down / touch start. These cause slowdowns in performance and issues with UX.
• "due to inline styles, mobile support and responsiveness in general are lacking"
  • Dialog boxes don't expand to the proper amount according to some testing. Apparently fixed in recent "dev" branches.

Trying to give back to the community :)