一、简单简介

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;

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐