react之styled-components（基础篇）

介绍

它是react的一个库，可以用来美化组件
它的写法依赖于es6，依赖于webpack

安装

-yarn add styled-components

基本使用的一些方法

-as
-Adapting based on props
-Extending Styles
-Styling-any-components
-Passed props 
-Coming from CSS
-Attaching-additional-props

基础起步

const Title = styled.h1`        
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`       //这个就相当于你创建了一个h1标签，并且赋给了它样式
使用：<Title>这个Title就相当于你的h1标签</Title>    //在浏览器是它就是一个<h1></h1>

一、Adapting based on props //适应基于你穿过来的值

1.传一个属性值

 <Title primary={"#fff"}>白俊鹏</Title>
 接收：color: ${props=>props.primary};

2.接收的时候还可以用表达式

<Wrapper bacg={"red"} />
接收：background: ${props=>props.bacg?"#000":"blue"};   //结果页面会变成黑色

二、Extending Styles //扩展样式

用来继承或者给某个组件添加新的功能，只需要将其包裹在styled()构造函数中即可(相同属性会覆盖，不同会添加)

    const Button = styled.button`                          
      padding: 0.25em 1em;
      border: 2px solid palevioletred;
    `;  //这个是要被包装的button
    const TomatoButton = styled(Button)`
      color: tomato;
      border-color: tomato;
      background:tomato;
    `; //这个就是包装后的Button，TomatoButton会继承Button的其他属性，同时也会添加color和背景属性，边框颜色会覆盖

按钮转换成a标签 //通过这种方式还可以将Button标签转换成a标签，还可以加链接

三、Styling-any-components //设计任何组件的样式

const Link = (props) => (
  <div>
    <a className={props.className}>
      {props.children}
    </a>
  </div>
)
将Link进行修改美化
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`   //StyledLink就是一个美化后的Link

四、Passed props 传递一些属性

这个方法可以让我们去给某个元素传递一些属性，用的时候就很方便

const Input = styled('input')`
  padding: 0.5em;
  margin: 0.5em;
  color: ${ props => props.inputColor };
  background: papayawhip;
  border: none;
  border-radius: 3px;
`
使用：<Input defaultValue="哈哈哈" type="text" inputColor="red"/>   //现在的input框就变得很好看，注意使用defaultValue属性可以对输入框进行输入

五、Attaching additional props //可以通过attrs构造函数来将其他道具或属性附加到组件

-你的组件标签：<StyledDiv hello="hi" />
-来给它加一些自定义属性：
    const StyledDiv = styled.div.attrs({
      title: 'aaa',
      id: 'bbb',
      'data-src': (props) => props.hello
    })

希望能对想要学习styled-components的新同学们有帮助~~~