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

[[411112]]

本文转载自微信公众号「JS每日一题」，作者灰灰。转载本文请联系JS每日一题公众号。

一、是什么

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

.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的标题
我是App中的一段文字描述

import React, { PureComponent } from 'react';
import Home from './Home';
import './App.module.css';
export default class App extends PureComponent {
render() {
return (
我是App的标题
我是App中的一段文字描述
)
}
}

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 (
app.js
SelfButton
);
}
}
export default Test;

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

[[411112]]

一、是什么

二、方式

在组件内直接使用

组件中引入css文件

组件中引入 .module.css 文件

CSS in JS

三、区别