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.