styled-compnents

我们可以使用这个库来自定义组件的样式，它会将给定的样式包装成一个组件，可以直接使用这个组件，就像ant-design中的组件一样，看起来很漂亮，我们直接使用即可，我们也可以使用styled-components来自定义我们想要的组件样式。

使用方法

先安装

cnpm install styled-components --save

然后引入

import styled from 'styled-components'

具体使用方法可以参考官网

我在这里只对每一项进行总结

总结

Getting Started

也就是我们可以像下面这样使用它

// Create a Title component that'll render an  tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a  tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  
    
      Hello World!
    
  
);

通过styled.html标签,然后跟一个模板字符串,可以在里面自定义样式，它返回一个react组件，我们可以在项目中使用它。

Adapting based on props

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  
    
    
  
);

意思就是我们在使用通过自定义得到的组件的时候，如果传入了props,可以在里面获得，每个属性的值，都可以是一个function，它的参数是传进来的props。

Extending Styles

可以使用styled()来继承组件的样式

const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

还可以使用as属性来改变组件所使用的标签或则基于的组件，例如一个以button为标签的组件，我可以把它变成以a为标签的组件

const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  
    
    
    Link with Tomato Button styles
  
);
-----------------------------------------------------
const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const ReversedButton = props =>

Passed props

如果是使用styled.html标签，那么在使用得到的组件的时候，可以传递已知的html属性给它,它会被传递到dom中。如果是使用的styled(component),那么在使用得到的组件的时候会将所有的属性，传递过去。

const Input = styled.input` padding: 0.5em; margin: 0.5em; color: ${props => props.inputColor || "palevioletred"}; background: papayawhip; border: none; border-radius: 3px; `; // Render a styled text input with the standard input color, and one with a custom input color render( );

上面的defaultValue会被传递到真实的dom中并被渲染，但是inputColor不是已知的html属性，所以不能被渲染。

Define Styled Components outside of the render method

为了避免每次渲染的时候重复生成组件，将生成组件的代码放到render外面。

Pseudoelements, pseudoselectors, and nesting(伪元素、伪选择器和嵌套)

Attaching additional props

可以使用.attrs来为组件或者元素传递属性。它的参数既可以是一个对象，也可以是一个函数，函数需要返回一个值。

Animations

styled-components使用方法