[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 } = ReactDOMconst 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