[React] Styling a React button component with Radium

转载于 2016-03-02 02:06:00 发布 · 54 阅读

文章标签：

本文介绍如何利用Radium库为React组件的内联样式添加:hover和:active等伪选择器效果，通过监听鼠标事件实现交互式样式变化。

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)