[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.

[React] Styling a React button component with Radium

标签：

原文地址：http://www.cnblogs.com/Answer1215/p/5233468.html