styled-components

styled-components是目前React中非常受关注的一种样式方案，既实现了css-in-js的模块化优点，移除了样式和组件之间的映射关系，又完全使用了CSS的书写习惯。使你使用起来几乎0门槛。

使用文档

安装

npm install --save styled-components

使用

最简单实现

import styled from 'styled-components';
const H1 = styled.h1`
  background-color: #a1a
`;

class App extends Component {
  render() {
    return (
      <div className="App">
        <H1>nihao</H1>
      </div>
    );
  }
}

用styled.*定义一个组件，然后使用模板字符串，在里面直接写CSS样式就可以。使用组件出现下面效果，可以看到样式已经生效了。

image.png

伪选择器

如果需要添加伪选择器怎么办呢？可以使用&符号。比如要加上一个鼠标滑的效果，可以这样写：

const Btn = styled.button`
  width: 100px;
  height: 50px;
  line-height: 50px;
  border: none;
  background-color: #ccc;
  &: hover{
    color: red;
  }
`;

当然，也支持直接写媒体查询语句等等，就和写CSS是一样的。

const Input = styled.input`
  font-size: 1.25em;
  border: none;
  /* ...more styles here... */
  @media (min-width: 650px) {
    font-size: 1.5em;
  }
`;

props控制样式

之前的方法是通过className来控制组件样式的显隐。现在既然消除了样式和组件之间的映射，当然不会再用这种方法了。使用props来控制样式。

const H1 = styled.h1`
  background-color: #a1a
  color: ${props => props.redFont ? 'red' : 'black'};
`;

<H1 redFont>nihao</H1>

当有redFont属性的时候，样式里面会判断显示红色字体，没有则是黑色。

嵌套

当然styled-components也支持样式嵌套，但是能不用就不要使用。

onst Example = styled.div`
  padding: 2em 1em;
  background: papayawhip;

  > p {
    text-decoration: underline;
  }

  html.test & {
    display: none;
  }
`;

render(
  <Example>
    <p>Hello World!</p>
  </Example>
);

全局样式

如果要设置全局样式，可以引入injectGlobal方法，在这个里面写就可以了。

import styled, {injectGlobal} from 'styled-components';

injectGlobal`
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
`

帧动画keyframes

如果要是keyframes也需要单独引入一个keyframes方法。

import styled, {keyframes} from 'styled-components';
const scaleFont = keyframes`
  from{
    font-size: 16px;
  }
  to{
    font-size: 26px;
  }
`;
const H1 = styled.h1`
  background-color: #a1a
  animation: ${scaleFont} 1s ease-out;
`;

主题辅助组件（上下文传值）

通过上下文API可以将主题值传递给组件树中任何组件。

import styled, { ThemeProvider } from 'styled-components';

const Box = styled.div`
  color: ${props => props.theme.color};
`;

<ThemeProvider theme={{ color: 'mediumseagreen' }}>
  <Box>I'm mediumseagreen!</Box>
</ThemeProvider>

编译后是什么样？

可以看到，最后渲染出来的样子是给元素添加了一个随机串的class，这样可以有效的避免全局css样式的污染。

image.png