React CSS Helpers

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  return (  <div>  <div className="mui--text-left">text-left</div>  <div className="mui--text-right">text-right</div>  <div className="mui--text-center">text-center</div>  <div className="mui--text-justify">text-justify</div>  <div className="mui--text-nowrap">text-nowrap</div>  </div>  );  } } ReactDOM.render(<Example />, document.getElementById('example')); 

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  return (  <table width="100%">  <tbody>  <tr style={{height: '50px'}}>  <td className="mui--align-top">align-top</td>  <td className="mui--align-middle">align-middle</td>  <td className="mui--align-bottom">align-bottom</td>  </tr>  </tbody>  </table>  );  } } ReactDOM.render(<Example />, document.getElementById('example')); 

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  return (  <div>  <span className="mui--no-transition"></span>  </div>  );  } } ReactDOM.render(<Example />, document.getElementById('example')); 

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  return (  <div>  {/* Same height as <Appbar> without other styles */}  <div className="mui--appbar-height" style={{border: "1px solid #aaa"}}></div>  <br />  {/* Only sets the minimum height */}  <div className="mui--appbar-height" style={{border: "1px solid #aaa"}}></div>  <br />  {/* Vertically center text in appbar */}  <div className="mui--appbar-height mui--appbar-line-height" style={{border: "1px solid #aaa"}}>  Vertically centered  </div>  </div>  );  } } ReactDOM.render(<Example />, document.getElementById('example')); 

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  return (  <div>  <span className="mui-caret"></span>  <span className="mui-caret mui-caret--up"></span>  <span className="mui-caret mui-caret--right"></span>  <span className="mui-caret mui-caret--left"></span>  </div>  );  } } ReactDOM.render(<Example />, document.getElementById('example')); 

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  return (  <div>  <div className="mui--z5">z5</div>  <br />  <div className="mui--z4">z4</div>  <br />  <div className="mui--z3">z3</div>  <br />  <div className="mui--z2">z2</div>  <br />  <div className="mui--z1">z1</div>  </div>  );  } } ReactDOM.render(<Example />, document.getElementById('example')); 

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  return (  <div>  <div>  <span className="mui--pull-left">pull-left</span>  <span className="mui--pull-right">pull-right</span>  <div className="mui--clearfix"></div>  </div>  <div>  <span className="mui--pull-right">pull-right</span>  <span className="mui--pull-left">pull-left</span>  <div className="mui--clearfix"></div>  </div>  </div>  );  } } ReactDOM.render(<Example />, document.getElementById('example')); 

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  return (  <div>  <ul className="mui-list--unstyled">  <li>list-unstyled 1</li>  <li>list-unstyled 2</li>  </ul>  <ul className="mui-list--inline">  <li>list-inline 1</li>  <li>list-inline 2</li>  </ul>  </div>  );  } } ReactDOM.render(<Example />, document.getElementById('example')); 

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  return (  <table className="mui-table">  <thead>  <tr>  <th></th>  <th>xs</th>  <th>sm (≥ 544px)</th>  <th>md (≥ 768px)</th>  <th>lg (≥ 992px)</th>  <th>xl (≥ 1200px)</th>  </tr>  </thead>  <tbody>  <tr>  <td><code>visible-*</code></td>  <td>  <div className="mui--visible-xs-block">&#10003;</div>  <div>  <div className="mui--visible-xs-inline">&#10003;</div>  <div className="mui--visible-xs-inline-block">&#10003;</div>  </div>  </td>  <td>  <div className="mui--visible-sm-block">&#10003;</div>  <div>  <div className="mui--visible-sm-inline">&#10003;</div>  <div className="mui--visible-sm-inline-block">&#10003;</div>  </div>  </td>  <td>  <div className="mui--visible-md-block">&#10003;</div>  <div>  <div className="mui--visible-md-inline">&#10003;</div>  <div className="mui--visible-md-inline-block">&#10003;</div>  </div>  </td>  <td>  <div className="mui--visible-lg-block">&#10003;</div>  <div>  <div className="mui--visible-lg-inline">&#10003;</div>  <div className="mui--visible-lg-inline-block">&#10003;</div>  </div>  </td>  <td>  <div className="mui--visible-xl-block">&#10003;</div>  <div>  <div className="mui--visible-xl-inline">&#10003;</div>  <div className="mui--visible-xl-inline-block">&#10003;</div>  </div>  </td>  </tr>  <tr>  <td><code>hidden-*</code></td>  <td><div className="mui--hidden-xs">&#10003;</div></td>  <td><div className="mui--hidden-sm">&#10003;</div></td>  <td><div className="mui--hidden-md">&#10003;</div></td>  <td><div className="mui--hidden-lg">&#10003;</div></td>  <td><div className="mui--hidden-xl">&#10003;</div></td>  </tr>  </tbody>  </table>  );  } } ReactDOM.render(<Example />, document.getElementById('example')); 

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  return (  <div>  <div className="mui--text-dark">dark</div>  <div className="mui--text-dark-secondary">dark-secondary</div>  <div className="mui--text-dark-hint">dark-hint</div>  <br />  <div style={{backgroundColor: '#444'}}>  <div className="mui--text-light">light</div>  <div className="mui--text-light-secondary">light-secondary</div>  <div className="mui--text-light-hint">light-hint</div>  </div>  <br />  <div className="mui--text-accent">accent</div>  <div className="mui--text-accent-secondary">accent-secondary</div>  <div className="mui--text-accent-hint">accent-hint</div>  <br />  <div className="mui--text-black">black</div>  <div className="mui--text-white" style={{backgroundColor: '#444'}}>white</div>  <div className="mui--text-danger">danger</div>  </div>  );  } } ReactDOM.render(<Example />, document.getElementById('example')); 

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  let style = {height: '10px'};  return (  <div>  <div className="mui--bg-primary" style={style}></div>  <div className="mui--bg-primary-dark" style={style}></div>  <div className="mui--bg-primary-light" style={style}></div>  <br />  <div className="mui--bg-accent" style={style}></div>  <div className="mui--bg-accent-dark" style={style}></div>  <div className="mui--bg-accent-light" style={style}></div>  <br />  <div className="mui--bg-danger" style={style}></div>  </div>  );  } } ReactDOM.render(<Example />, document.getElementById('example')); 

import React from 'react'; import ReactDOM from 'react-dom'; class Example extends React.Component {  render() {  return (  <div className="mui--no-user-select">  This text is not selectable  </div>  );  } } ReactDOM.render(<Example />, document.getElementById('example'));