react——css-in-js——styled-components库——定义样式——样式继承——属性传递

Posted 2022-09-23 勇敢*牛牛

介绍

CSS-in-JS是一种技术，而不是一个具体的库实现。简单来说CSS-in-JS就是将应用的CSS样式写在javascript文件里面，而不是独立为一些css，scss或less之类的文件，这样你就可以在CSS中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。CSS-in-JS在React社区的热度是最高的，这是因为React本身不会管用户怎么去为组件定义样式的问题，而Vue有属于框架自己的一套定义样式的方案。
styled-components 应该是CSS-in-JS最热门的一个库，通过styled-components，你可以使用ES6的标签模板字符串语法，为需要styled的Component定义一系列CSS属性，当该组件的JS代码被解析执行的时候，styled-components会动态生成一个CSS选择器，并把对应的CSS样式通过style标签的形式插入到head标签里面。动态生成的CSS选择器会有一小段哈希值来保证全局唯一性来避免样式发生冲突。
在react项目中，可以让样式命名不冲突的方案

• 1、定义样式名称时，就让它唯一
• 2、使用内置的cssModule
• 3、css-in-js 把css当作js来使用

安装

vscode中安装对于书写插件

预备知识：
模板字符串的语法：函数写法：参数意义

const tag = (strings, ...values) => 
  // console.log(values);
  // return strings.join('')
  let index = 0
  let str = ''
  values.forEach((item) => 
    str += strings[index] + item
    index++
  )
  return str + strings[index]


const aa = '11'
const bb = '22'

const ret = tag`a$aab$bbc`

console.log(ret);//a11b22c33

---

安装：

npm i -S styled-components

导入：

import styled from 'styled-components'

使用css-in-js技术方案完成 react项目中的样式编写
styled-components把样式当作组件来定义和使用，样式就是组件，组件就是样式

---

语法

export const ChildContainer = styled.html标签名`样式`

首先定义样式：style.js

import styled from 'styled-components'

export const ChildContainer = styled.div`
    font-size: 30px;
    color :red ;
`

就像使用常规 React 组件一样使用ChildContainer

import React,  Component  from 'react';
import  ChildContainer  from './style';
class Child extends Component 
    render() 
        return (
            <ChildContainer>
               字体
            </ChildContainer>
        );
    


export default Child;

---

---

样式继承

对同名一元素的大部分样式内容进行继承

export const ChildContainer = styled.div`
    font-size: 30px;
    color :red ;
    .title
        color:blue ;
    
`
export const SubTitleContainer = styled(ChildContainer)`
    font-size: 10px;
    
`

---

样式嵌套

export const ChildContainer = styled.div`
	font-size: 30px;
	color :red ;
	.title
	    color:blue ;
	
`