CSS in JS

// 两个 && 优先级更高，覆盖全局
const Thing = styled.div`
  && {
    color: blue;
  }
`

const GlobalStyle = createGlobalStyle`
  div${Thing} {
    color: red;
  }
`

// @keyframes 不会被限定在单个组件 - 可以通过 keyframes
// Create the keyframes
const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;
// Here we create a component that will rotate everything we pass in over two seconds
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;


// 通过 props 访问主题
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;
// 默认主题
Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}
// 定义主题
const theme = {
  main: "mediumseagreen"，

  fg: "palevioletred",
  bg: "white",
};

// 使用函数调整主题
const invertTheme = ({ fg, bg }) => ({
  fg: bg,
  bg: fg
});

// 使用主题
render(
  <div>
    <Button>Normal</Button>
    <ThemeProvider theme={theme}>
      <Button>Themed</Button>

      <ThemeProvider theme={invertTheme}>
        <Button>Inverted Theme</Button>
      </ThemeProvider>
    </ThemeProvider>
  </div>
);