温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

react中引入css的方式是什么

发布时间:2022-04-27 10:34:43 来源:亿速云 阅读:180 作者:iii 栏目:开发技术

这篇“react中引入css的方式是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“react中引入css的方式是什么”文章吧。

    前言

    组件式开发选择合适的css解决方案尤为重要

    通常会遵循以下规则:

    • 可以编写局部css,不会随意污染其他组件内的原生;

    • 可以编写动态的css,可以获取当前组件的一些状态,根据状态的变化生成不同的css样式;

    • 支持所有的css特性:伪类、动画、媒体查询等;

    • 编写起来简洁方便、最好符合一贯的css风格特点

    在这一方面,vue使用css起来更为简洁:

    • 通过 style 标签编写样式

    • scoped 属性决定编写的样式是否局部有效

    • lang 属性设置预处理器

    • 内联样式风格的方式来根据最新状态设置和改变css

    而在react中,引入CSS就不如Vue方便简洁,其引入css的方式有很多种,各有利弊

    方式

    常见的CSS引入方式有以下:

    • 在组件内直接使用

    • 组件中引入 .css 文件

    • 组件中引入 .module.css 文件

    • CSS in JS

    在组件内

    直接在组件中书写css样式,通过style属性直接引入,如下:

    import React, { Component } from "react";
    
    const div1 = {
      width: "300px",
      margin: "30px auto",
      backgroundColor: "#44014C",  //驼峰法
      minHeight: "200px",
      boxSizing: "border-box"
    };
    
    class Test extends Component {
      constructor(props, context) {
        super(props);
      }
     
      render() {
        return (
         <div>
           <div style={div1}>123</div>
           <div style={{backgroundColor:"red"}}>
         </div>
        );
      }
    }
    
    export default Test;

    上面可以看到,css属性需要转换成驼峰写法 这种方式优点:

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

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

    缺点:

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

    • 某些样式没有提示

    • 大量的样式, 代码混乱

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

    组件中引入css文件

    css单独写在一个css文件中,然后在组件中直接引入

    App.css文件:

    .title {
      color: red;
      font-size: 20px;
    }
    
    .desc {
      color: green;
      text-decoration: underline;
    }

    组件中引入:

    import React, { PureComponent } from 'react';
    
    import Home from './Home';
    
    import './App.css';
    
    export default class App extends PureComponent {
      render() {
        return (
          <div className="app">
            <h3 className="title">我是App的标题</h3>
            <p className="desc">我是App中的一段文字描述</p >
            <Home/>
          </div>
        )
      }
    }

    这种方式存在不好的地方在于样式是全局生效,样式之间会互相影响

    组件中引入 .module.css 文件

    css文件作为一个模块引入,这个模块中的所有css,只作用于当前组件。不会影响当前组件的后代组件

    这种方式是webpack特工的方案,只需要配置webpack配置文件中modules:true即可

    import React, { PureComponent } from 'react';
    
    import Home from './Home';
    
    import './App.module.css';
    
    export default class App extends PureComponent {
      render() {
        return (
          <div className="app">
            <h3 className="title">我是App的标题</h3>
            <p className="desc">我是App中的一段文字描述</p >
            <Home/>
          </div>
        )
      }
    }

    这种方式能够解决局部作用域问题,但也有一定的缺陷:

    • 引用的类名,不能使用连接符(.xxx-xx),在 JavaScript 中是不识别的

    • 所有的 className 都必须使用 {style.className} 的形式来编写

    • 不方便动态来修改某些样式,依然需要使用内联样式的方式;

    CSS in JS

    CSS-in-JS, 是指一种模式,其中CSS由 JavaScript生成而不是在外部文件中定义

    此功能并不是 React 的一部分,而是由第三方库提供,例如:

    • styled-components

    • emotion

    • glamorous

    下面主要看看styled-components的基本使用

    本质是通过函数的调用,最终创建出一个组件:

    • 这个组件会被自动添加上一个不重复的class

    • styled-components会给该class添加相关的样式

    基本使用如下:

    创建一个style.js文件用于存放样式组件:

    export const SelfLink = styled.div`
      height: 50px;
      border: 1px solid red;
      color: yellow;
    `;
    
    export const SelfButton = styled.div`
      height: 150px;
      width: 150px;
      color: ${props => props.color};
      background-image: url(${props => props.src});
      background-size: 150px 150px;
    `;

    引入样式组件也很简单:

    import React, { Component } from "react";
    
    import { SelfLink, SelfButton } from "./style";
    
    class Test extends Component {
      constructor(props, context) {
        super(props);
      }  
     
      render() {
        return (
         &lt;div&gt;
           &lt;SelfLink title="People's Republic of China"&gt;app.js&lt;/SelfLink&gt;
           &lt;SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}&gt;
              SelfButton
            &lt;/SelfButton&gt;
         &lt;/div&gt;
        );
      }
    }
    
    export default Test;

    区别

    通过上面四种样式的引入,可以看到:

    • 在组件内直接使用css该方式编写方便,容易能够根据状态修改样式属性,但是大量的演示编写容易导致代码混乱

    • 组件中引入 .css 文件符合我们日常的编写习惯,但是作用域是全局的,样式之间会层叠

    • 引入.module.css 文件能够解决局部作用域问题,但是不方便动态修改样式,需要使用内联的方式进行样式的编写

    • 通过css in js 这种方法,可以满足大部分场景的应用,可以类似于预处理器一样样式嵌套、定义、修改状态等

    以上就是关于“react中引入css的方式是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI