[React] Styling a React button component with Radium

React's inline styles allow components to stand on their own by not requiring any external CSS. However HTML's style attributes don't support pseudo selectors like  :hover  and  :active . By using Radium to listen to mouse events we can restore  :hover  and  :active  selectors to inline styles.
 

const { render } = ReactDOM
const rootEl = document.getElementById('root')


const Div = Radium(({children}) => {
  return (
     <div style={style}>
      {children}
    </div>
  );
});

const style = {
  backgroundColor: '#07d',
  border: 'none',
  borderRadius: 4,
  color: '#fff',
  padding: '5px 20px',
  ':hover': {
    backgroundColor: '#08f'
  }
}


render(<Div>OK</Div>, rootEl)

 
So, just need to wrap the compoment in to Radium() method.