Consider using Radium for inline styles

[wmertens]

https://github.com/FormidableLabs/radium adds "interactive" styles (hover etc) to inline styles, and also allows hierachical styles and automatic vendor prefixing. It's fast and pretty light-weight (32KB minimized).

[PavelPZ]

From google search, Material-UI is very professional grade and cleanly built framework that implements Google’s material design. As I can see in demo, it contains huge amount of best quality components. BUT: can it be used in large modern Web project, when I can read such information like bellow?

• Radium could help with Inline styling (when @jzelenka commented on 12 Jan at #1951):

  Radium is using onMouseEnter / onMouseLeave events and state for tracking state for :hover. is slower than css :hover.

  complex page with many elements, slower machine and quick mouse movement it can even miss some events. So your element stays 'hovered' even after mouse leave it.

  For hover, any inline styles solution is worse than css :hover.

• when solving Inline styling, why to use Radium - it is only Pure inline styles library for React: Comparison of CSS in JS Libraries for React,
• due to inline styles, it is slow on mobile devices compare to Angular's Material component, see #42
• due to inline styles, mobile support and responsiveness in general are lacking, see #2950
• 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>

instead of something like

<button class="rui-button-float rui-icon rui-icon-plus"/>

[mbrookes]

https://github.com/callemall/material-ui/issues/684#issuecomment-170849571

[ghost]

Performace section in google web fundamntals https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations

recommends bem

.list { }
.list__list-item { }

and css module will make it easy.

[mgcrea]

An in-between alternative that you may find interesting: https://github.com/rtsao/csjs

[ffxsam]

I've decided to use BEM on my own projects, until something becomes standardized. IMO there are way too many bandaid solutions for this particular problem right now.

[jokeyrhyme]

@ffxsam CSS Modules feel exactly like BEM but with the benefit of isolation via automatically generated class names

• component.css

.self { /* ... */ }
.header { /* ... */ }
.footer { /* ... */ }

• component.js

import React from 'react';
import styles from './component.css';
export const Component = (props) => (
  <div className={styles.self}>
    <div className={styles.header}></div>
    <div className={styles.footer}></div>
  </div>
);

No need to prefix every class name with "component_". After a compile step, the class names are all unique, and the styles object in JavaScript maps the original developer-chosen names (e.g. "header") to the generated unique name.

Animations and Media Queries all just work. You don't sacrifice any CSS features, you just gain computer-aided isolation and the wonderful alleviation of stress that it brings. :)

This approach works well with browserify and webpack. You can build to a single CSS file at the end, or have JavaScript load the styles, and you can combine this with CSS post-processing. There are ways to use SASS and LESS with this, too.

[mbrookes]

Folks, we've asked several times to keep this discussion on topic, but as that doesn't seem to be possible, I'm locking this thread.

While we're still exploring options for the future of styling in Material-UI, I think it's safe to say that it will be based on CSS in JS in some form. You are of course welcome to use whatever you wish in your own projects.