[React] Styling a React button component with Radium

React ' s inline styles allow the components of stand on their own by not requiring any external CSS. However HTML's style attributes don ' t support pseudo selectors like and:hover:active. By using Radium to listen to mouse events we can restore:hoverand:activeselectors 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.

[React] Styling a React button component with Radium