styled-components使用方法

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 <h1> 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 <section> 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(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

通过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(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

意思就是我们在使用通过自定义得到的组件的时候，如果传入了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(
  <div>
    <Button>Normal Button</Button>
    <Button as="a" href="/">Link with Button styles</Button>
    <TomatoButton as="a" href="/">Link with Tomato Button styles</TomatoButton>
  </div>
);
-----------------------------------------------------
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 => <button {...props} children={props.children.split('').reverse()} />

render(
  <div>
    <Button>Normal Button</Button>
    <Button as={ReversedButton}>Custom Button with Normal Button styles</Button>
  </div>
);

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(
  <div>
    <Input defaultValue="@probablyup" type="text" />
    <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />
  </div>
);

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

Define Styled Components outside of the render method

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

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

伪元素、伪选择器可以直接写在当前的元素定义的地方，表示该组件的样式
&符号，指向当前的组件
如果不适用&符号,那么该选择器对子元素起作用

const Thing = styled.button`
  color: blue;

  ::before {
    content: '🚀';
  }

  :hover {
    color: red;
  }

  &.something {
    background: orange; // <Thing> tagged with an additional CSS class ".something"
  }

  .something {
    border: 1px solid; // 可以在子元素中使用这个类
    display: block;
  }

Attaching additional props

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

const Input = styled.input.attrs({
  // we can define static props
  type: "password",

  // or we can define dynamic ones
  margin: props => props.size || "1em",
  padding: props => props.size || "1em"
})`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  /* here we use the dynamically computed props */
  margin: ${props => props.margin};
  padding: ${props => props.padding};
`;

render(
  <div>
    <Input placeholder="A small text input" size="1em" />
    <br />
    <Input placeholder="A bigger text input" size="2em" />
  </div>
);

Animations

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;
`;

render(
  <Rotate>&lt; 💅 &gt;</Rotate>
);