React-CSS - 技术栈

1. React中的样式

React并没有像Vue那样提供特定的区域给我们编写CSS代码

所以你会发现在React代码中, CSS样式的写法千奇百怪

2. 内联样式

内联样式的优点:

内联样式, 样式之间不会有冲突

可以动态获取当前state中的状态

内联样式的缺点：

写法上都需要使用驼峰标识

某些样式没有提示

大量的样式, 代码混乱

某些样式无法编写(比如伪类/伪元素)

class App extends React.Component{
   
   
    constructor(props){
   
   
        super(props);
        this.state = {
   
   
            color: 'red'
        }
    }
    render(){
   
   
        return (
            <div>
                <p style={
   
   {
   
   fontSize:'50px', color: this.state.color}}>我是段落1</p>
                <p style={
   
   {
   
   fontSize:'50px', color:'green'}}>我是段落2</p>
                <button onClick={
   
   ()=>{
   
   this.btnClick()}}>按钮</button>
            </div>
        );
    }
    btnClick(){
   
   
        this.setState({
   
   
            color: 'blue'
        })
    }
}
export default App;

3. 外链样式

将CSS代码写到一个单独的CSS文件中, 在使用的时候导入进来

外链样式的优点:

编写简单, 有代码提示, 支持所有CSS语法

外链样式的缺点：

不可以动态获取当前state中的状态

属于全局的css，样式之间会相互影响

//Home.tsx文件
import React from 'react';
import './Home.css'
class Home extends React.Component{
   
   
    render() {
   
   
        return (
            <div id={
   
   'home'}>
                <p>我是home段落</p>
                <a href={
   
   'www.it666.com'}>我是home超链接</a>
            </div>
        )
    }
}
export default Home;
/*Home.css文件*/
#home p{
   
   
    font-size: 50px;
    color: red;
}
#home a{
   
   
    color: yellow;
}

4.Css Module

React的脚手架已经内置了css modules的配置：

.css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等；

Css Modules优点

编写简单, 有代码提示, 支持所有CSS语法

解决了全局样式相互污染问题

Css Modules缺点

不可以动态获取当前state中的状态

那么怎样解决Css Modules缺点不可以动态获取当前state中的状态的问题呢？

先来了解一下模板字符串

拓展点------模板字符串

ES6中的模板字符串

const str = my name is ${name}, my age is ${age};

console.log(str); // my name is yiya_xiaoshan, my age is 18

除此之外，react中还有一些ES6中没有的特性

在JS中除了可以通过()来调用函数以外,,其实我们还可以通过模板字符串来调用函数

function test(...args) {

console.log(args);

}

test(1, 3, 5); // [ 1, 3, 5 ]

test1, 3, 5; // [ [ '1, 3, 5' ] ]

通过模板字符串调用函数规律:

参数列表中的第一个参数是一个数组, 这个数组中保存了所有不是插入的值

参数列表的第二个参数开始, 保存的就是所有插入的值

总结结论

我们可以拿到模板字符串中所有的内容\所有非插入的内容

=>我们可以拿到模板字符串中所有插入的内容

所以我们就可以对模板字符串中所有的内容进行单独的处理

test`1, 3, 5, ${
     
     name}, ${
     
     age}`; 
// [ [ '1, 3, 5, ', ', ', '' ], 'yiya_xiaoshan', 18 ]

4. CSS-in-JS

1. 使用CSS-in-JS的原因

在React中, React认为结构和逻辑是密不可分的,所以在React中结构代码也是通过JS来编写的

正是受到React这种思想的影响, 所以就有很多人开发了用JS来编写CSS的库------styled-components / emotion

利用JS来编写CSS, 可以让CSS具备样式嵌套、函数定义、逻辑复用、动态修改状态等特性, 也就是说, 从某种层面上, 提供了比过去Less/Scss更为强大的功能,所以Css-in-JS, 在React中也是一种比较推荐的方式

# 2.styled-components使用

安装styled-components

npm install styled-components --save

导入styled-components

import styled from 'styled-components';

利用styled-components创建组件并设置样式

styled.divxxx:xxx

import React from 'react';
import styled from 'styled-components';
// 注意点:
// 默认情况下在webstorm中编写styled-components的代码是没有任何的代码提示的
// 如果想有代码提示, 那么必须给webstorm安装一个插件
const StyleDiv = styled.div`
    p{
        font-size: 50px;
        color: red;
    }
    a{
       font-size: 25px;
       color: green;
    }
`;
class Home extends React.Component{
   
   
    render() {
   
   
        return (
            <StyleDiv>
                <p>我是home段落</p>
                <a href={
   
   'www.it666.com'}>我是home超链接</a>
            </StyleDiv>
        )
    }
}
export default Home;

5. styled-components

5.1 styled-components特性之- props(回调函数)和- attrs

import React from 'react';
//1.导入style-components库
import styled from 'styled-components';
//2.通过回调函数调用props里头的数据
// 通过回调函数调用attrs设置样式
const StyleDiv = styled.div`
    p{
        font-size: 50px;
        color: ${
     
     props => props.color};
    }
`;
const StyleInput = styled.input.attrs({
   
   
    type:'password'
})``
class Home extends React.Component{
   
   
    constructor(props){
   
   
        super(props);
        this.state = {
   
   
            color: 'red'
        }
    }
    render() {
   
   
        return (
            <StyleDiv color={
   
   this.state.color}>
                <p>我是home段落</p>
                <a href={
   
   'www.it666.com'}>我是home超链接</a>
                <button onClick={
   
   ()=>{
   
   this.btnClick()}}>按钮</button>
                <StyleInput></StyleInput>
            </StyleDiv>
        )
    }
    btnClick(){
   
   
        this.setState({
   
   
            color: 'green'
        })
    }
}
export default Home;

5.2 如何通过style-components统一设置样式------ThemeProvider

// 在App.js引入ThemeProvider
import {
   
    ThemeProvider } from 'styled-components';
<!--通过需要应用样式的组件用ThemeProvider包裹-->
 <ThemeProvider theme={
   
   {
   
   size:'100px',color:'green'}}>
          <Header/>
          <Header name={
   
   "sjl"} age={
   
   20}></Header>
 </ThemeProvider>

高阶组件会自动将其ThemeProvider提供的数据保存到子代的props

import React from 'react'
import ReactTypes from 'prop-types'
import styled from 'styled-components'
const StyleDiv1 = styled.div`
  p{
    color:${
     
     props=>props.theme.color};
    font-size:${
     
     props=>props.theme.size}
  }
`
function Header(props) {
   
   
  console.log(props)
  return (
    <div>
      <div className={
   
   'header'}>我是头部</div>
    <StyleDiv1>我的世界</StyleDiv1>
    </div>
  )
}
export default Header;

5.3 style-components的继承关系

import React from 'react';
import styled from 'styled-components'
/* const StyleDiv1 = styled.div`
  font-size: 100px;
  color: red;
  background: blue;
`;
const StyleDiv2 = styled.div`
  font-size: 100px;
  color: green;
  background: blue;
`; */
const BaseDiv = styled.div`
  font-size: 100px;
  background: blue;
`;
const StyleDiv1 = styled(BaseDiv)`
  color: red;
`;
const StyleDiv2 = styled(BaseDiv)`
  color: green;
`;
class App extends React.Component{
   
   
    render(){
   
   
        return (
            <div>
                <StyleDiv1>我是div1</StyleDiv1>
                <StyleDiv2>我是div2</StyleDiv2>
            </div>
        );
    }
}
export default App;