styled-components介绍与使用

最开始学css的时候，为了避免写的样式影响到另外的地方。所以我们这样来写的。首先给一个元素写了一个唯一id | class，然后在这个里面写对应的样式，就可以避免影响到其它地方的代码。但是，如果项目是多人协作，那就可能存在命名冲突了，所以我们想要一种技术来让整个项目起的类名都是唯一的id。避免样式冲突等问题。所以css in js就来了。

CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些.css，.scss或者less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义

1 . 简介

styled-components 是想知道我们如何增强 CSS 以对 React 组件系统进行样式设置的结果。通过专注于单个用例，我们设法优化了开发人员的体验以及最终用户的输出。

2 . 提供及优点

没有类名错误: styled-components 为您的样式生成唯一的类名。您永远不必担心重复、重叠或拼写错误。

更容易删除 CSS: 很难知道类名是否在您的代码库中的某处使用。styled-components 让它变得显而易见，因为每一个样式都与特定的组件相关联。如果组件未使用（工具可以检测到）并被删除，则其所有样式都会随之删除。

简单的动态样式: 根据组件的 props 或全局主题调整组件的样式简单直观，无需手动管理数十个类。

3 . 用法

<1> 基本用法

const 自定义标签名 = styled.**标准**标签名`

相关样式：
....
 
`

创建一个Title组件，将render一个带有样式的h1标签：

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

创建一个Wrapper组件，将render一个带有样式的section标签

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

• 样式可以嵌套着写
• 直接把创建好的标签包在要包括的内容外面就行！！

<2> 使用 props 属性

• 被封装标签本身自带属性的透传：

   - eg ： input 的 type...
  

• 一些自定义属性，也可以在封装时通过 props 使用

<3> style() 高阶组件封装函数

• 可以实现继承复用

<4> 动画的实现

• 需要导入 {keyframes} 从 styled-components 库

• 然后用keyframes ... 封装动画的样式

• 然后在封装标签时，调用该动画样式！！