Radium - React 인라인 스타일 관리

radium : https://www.npmjs.com/package/radium

1. :hover

// HOC로 컴포넌트를 Radium으로 감싸준다. 그리고 아래와 같이 쓰면 됨!
const style = {
    backgroundColor: "green",
    color: "white",
    cursor: "pointer",
    padding: "8px",
    ":hover": {
      backgroundColor: "lightgreen",
      color: "black",
    },
  };

2. 미디어쿼리

// 루트 디렉토리에서 StyleRoot를 가져온다. 그 후, StyleRoot컴포넌트로 감싸준다.
import Radium, { StyleRoot } from "radium";

<StyleRoot>
  <div className="App">
    <Something />
  </div>
</StyleRoot>

const style = {
    "@media (min-width: 500px)": {
      width: "450px",
    },
  };

그래도 역시나 styled-components가 최고인듯..