【styled-components】css-in-js 热门库

一、简单简介

css-in-js 是一种技术，而不是一个具体的库的实现。简单来说 css-in-js 就是将应用的 css 样式写在 JavaScript 文件里面，而不是独立为一些 css、scss或less这类的文件，这样你就可以在 css 中使用一些属于 js 的如模块声明、变量定义、函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。css-in-js 在react社区的热度是最高的，这是因为 react 本身不会管用户怎么去为组件定义样式问题，而vue有属于框架自己的一套定义样式的方案

• 在js文件中写css就是css-in-js技术

好处：
- 支持一些js的特性
	- 继承
	- 变量
	- 函数
- 支持框架的特性
	- 传值特性

styled-components 应该是css-in-js 最热门的一个库，通过styled-components，你可以使用ES6的标签模板字符串语法，为styled的component定义一系列css属性，当该组件的js代码被解析执行的时候，styled-components会动态生成一个css选择器（比较随意的），并把对应的css样式通过style标签的形式插入到head标签里面。动态生成的css选择器会有一小段哈希值来保证全局唯一性来避免样式发送冲突

1. 通过ES6里面的模板字符串形式写css样式（遵循以前css样式代码的写法）
2. 每个样式选择器都会在编译之后自动被添加上一个hash值（全局唯一性）

• 使用styled-components前需要安装：

npm i -S styled-components

• 由于css后期会在模板字符串中编写，默认情况下 vsconde 是没有css样式代码片段的（写样式的时候没有代码提示的），为了提高css代码在模板字符串中编写的效率，建议安装一个vscode的扩展：
• vscode-styled-components
  

二、基本使用

1. 建立一个js模块文件（可以看做是一个css文件）
2. 在js模块文件中导入styled-components包中的默认导出
3. 使用2中的导入名称结合以下语法来声明样式组件：
4. const 标签名（首字母大写）= styled.HTML标签名`css样式`

• 案例：给下面文字加上样式
• Basic.jsx文件

import React, { Component } from 'react';
// 导入样式组件
import styled from 'styled-components';

class Basic extends Component {
    render() {
        return (
            <div>
                <Ha>内部文件写法</Ha>
            </div>
        );
    }
}
const Ha = styled.div`
    font-size: 50px;
    color: red;
`

export default Basic;

---

• 案例：给下面文字加上样式
• Basic.jsx文件

import React, { Component } from 'react';
// 导入样式组件
import {BigText} from './style';

class Basic extends Component {
    render() {
        return (
            <div>
                <BigText>外部文件写法</BigText>
            </div>
        );
    }
}

export default Basic;

• style.js文件

import styled from 'styled-components';

// const 标签名（首字母大写）= styled.HTML标签名`css样式`
// 导出
export const BigText = styled.div`
    font-size: 50px;
    color: green;
    font-family: 华文行楷;
`

三、样式继承

1. 在styled-components中也可以使用样式的继承
2. 其继承思想与react的组件继承相似：
	- 继承父的样式：
		- 父有，子没有，继承后子也有
	- 重载父的样式
		- 父有，子有，继承后子覆盖父的

• style.js文件

import styled from 'styled-components';

// const 标签名（首字母大写）= styled.HTML标签名`css样式`
// 导出
const Fu = styled.div`
    font-size: 50px;
    color: green;
    font-family: 华文行楷;
`
// 子继承父
// 继承：color 和 font-family子没有，会用父的
// 重载：font-size两者都有，以子为准
const Zi = styled(Fu)`
    font-size: 80px;    
    background:yellowgreen;
`

export {Fu,Zi};

• Basic.jsx文件

import React, { Component } from 'react';
// 导入样式组件
import {Fu, Zi} from './style';

class Basic extends Component {
    render() {
        return (
            <div>
                <Fu>原先的样式</Fu>
                <Zi>现在的样式</Zi>
            </div>
        );
    }
}

export default Basic;

四、属性传递

• 属性传递：样式值的动态传参（组件传值）

• 基于css-in-js的特性，在styled-components中也允许我们使用props（父传子），这样一来，我们可以对部分需要的样式进行传参，方便动态控制样式的改变

• style.js文件

import styled from 'styled-components';

// 动态属性传递样式的值
// 没传值就是默认值green，传了值就是值的属性
const Bgm = styled.div`
    background: ${(props)=>props.bgColor || 'green'};
    font-size: ${(props)=>props.Size || '20px'};

`
export {Bgm};

• • Basic.jsx文件

import React, { Component } from 'react';
// 导入样式组件
import {Bgm} from './style';

class Basic extends Component {
    render() {
        return (
            <div>
                <Bgm>原先的样式</Bgm>
                <Bgm bgColor={'yellow'} Size='30px'>传值的样式</Bgm>
            </div>
        );
    }
}

export default Basic;