[React] Styling a React button component with Radium

Posted 2020-06-17

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.