Material UI Base Fiddle

HTML

<script src="https://fb.me/react-with-addons-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<div id="container"></div>

Babel + JSX

const {
  RaisedButton,
  MuiThemeProvider,
  getMuiTheme,
} = MaterialUI;

const InvertHoverButton = ({ id, backgroundColor, labelColor }) => {
  // 450ms cubic-bezier(0.23, 1, 0.32, 1)
  const transition = `background-color 450ms ${MaterialUI.transitions.easeOutFunction} 0ms`;

	return (
    <div style={{ display: 'inline-block' }}>
        <style>
          {`
          #${id}:hover {
            transition: ${transition} !important;
            background-color: ${labelColor} !important;
            color: ${backgroundColor} !important;
          }

          #${id} {
            transition: ${transition} !important;
            background-color: ${backgroundColor} !important;
            color: ${labelColor} !important;
          }      
          `}
        </style>
        <RaisedButton id={id} backgroundColor={labelColor} labelColor={backgroundColor} className="test">Fiddle!</RaisedButton>
      </div>  
  );
};

 class Example extends React.Component {
  render() {
    return (
      <div>
      <InvertHoverButton id="myButton" backgroundColor="red" labelColor="white">Fiddle!</InvertHoverButton>
      </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);