文章详情

登录

短信预约-IT技能 免费直播动态提醒

• 地区
• 手机号
• 验证码获取验证

立即预约

选择考试省份

• 北京
• 上海
• 天津
• 重庆
• 河北
• 山东
• 辽宁
• 黑龙江
• 吉林
• 甘肃
• 青海
• 河南
• 江苏
• 湖北
• 湖南
• 江西
• 浙江
• 广东
• 云南
• 福建
• 海南
• 山西
• 四川
• 陕西
• 贵州
• 安徽
• 广西
• 内蒙
• 西藏
• 新疆
• 宁夏
• 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

面试官：说说React中引入Css的方式有哪几种？区别？

2024-12-03 01:39

关注

一、是什么

组件式开发选择合适的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 ( 
     
 
       123

 

       "red"}}> 

     

.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 ( 
      "app"> 
        "title">我是App的 
        "desc">我是App中的一段文字描述
 
         
      

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

组件中引入 .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 ( 
      "app"> 
        "title">我是App的 
        "desc">我是App中的一段文字描述
 
         
       
    ) 
  } 
} 

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

• 引用的类名，不能使用连接符(.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 ( 
     
 
       "People's Republic of China">app.js 
       "palevioletred" style={{ color: "pink" }} src={fist}> 
          SelfButton 
         
      
    ); 
  } 
} 
 
export default Test; 

三、区别

通过上面四种样式的引入，可以看到：

• 在组件内直接使用css该方式编写方便，容易能够根据状态修改样式属性，但是大量的演示编写容易导致代码混乱
• 组件中引入 .css 文件符合我们日常的编写习惯，但是作用域是全局的，样式之间会层叠
• 引入.module.css 文件能够解决局部作用域问题，但是不方便动态修改样式，需要使用内联的方式进行样式的编写
• 通过css in js 这种方法，可以满足大部分场景的应用，可以类似于预处理器一样样式嵌套、定义、修改状态等

至于使用react用哪种方案引入css，并没有一个绝对的答案，可以根据各自情况选择合适的方案

参考文献

https://zh-hans.reactjs.org/docs/faq-styling.html#gatsby-focus-wrapper

https://mp.weixin.qq.com/s/oywTpNKEikMXn8QTBgITow

首页课程

资料下载问答资讯