一、是什么

組件式開發(fā)選擇合適的css解決方案尤為重要

通常會(huì)遵循以下規(guī)則：

• 可以編寫局部css，不會(huì)隨意污染其他組件內(nèi)的原生；
• 可以編寫動(dòng)態(tài)的css，可以獲取當(dāng)前組件的一些狀態(tài)，根據(jù)狀態(tài)的變化生成不同的css樣式；
• 支持所有的css特性：偽類、動(dòng)畫、媒體查詢等；
• 編寫起來簡潔方便、最好符合一貫的css風(fēng)格特點(diǎn)

在這一方面，vue使用css起來更為簡潔：

• 通過 style 標(biāo)簽編寫樣式
• scoped 屬性決定編寫的樣式是否局部有效
• lang 屬性設(shè)置預(yù)處理器
• 內(nèi)聯(lián)樣式風(fēng)格的方式來根據(jù)最新狀態(tài)設(shè)置和改變css

而在react中，引入CSS就不如Vue方便簡潔，其引入css的方式有很多種，各有利弊

二、方式

常見的CSS引入方式有以下：

在組件內(nèi)直接使用組件中引入 .css 文件組件中引入 .module.css 文件CSS in JS 在組件內(nèi)直接使用

直接在組件中書寫css樣式，通過style屬性直接引入，如下：

import React from "react";
//駝峰命名法聲明屬性
const div1 = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",  
  minHeight: "200px",
  boxSizing: "border-box"
};
export default const App = () => {
  constructor(props, context) {
    super(props);
  }
  render() {
    return (
     <div>
       <div style={div1}>123</div>
       <div style={{backgroundColor:"red"}}>
     </div>
    );
  }
}

上面可以看到，css屬性需要轉(zhuǎn)換成駝峰寫法

這種方式優(yōu)點(diǎn)：

• 內(nèi)聯(lián)樣式, 樣式之間不會(huì)有沖突
• 可以動(dòng)態(tài)獲取當(dāng)前state中的狀態(tài)

缺點(diǎn)：

• 寫法上都需要使用駝峰標(biāo)識(shí)
• 某些樣式?jīng)]有提示
• 大量的樣式, 代碼混亂
• 某些樣式無法編寫(比如偽類/偽元素)

組件中引入css文件

將css單獨(dú)寫在一個(gè)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 const App = () => {
  render() {
    return (
      <div className="app">
        <h2 className="title">我是App的標(biāo)題</h2>
        <p className="desc">我是App中的一段文字描述</p >
        <Home/>
      </div>
    )
  }
}

這種方式存在不好的地方在于樣式是全局生效，樣式之間會(huì)互相影響

組件中引入 .module.css 文件

將css文件作為一個(gè)模塊引入，這個(gè)模塊中的所有css，只作用于當(dāng)前組件。不會(huì)影響當(dāng)前組件的后代組件

這種方式是webpack的方案，只需要配置webpack配置文件中modules:true即可

import React, { PureComponent } from 'react';
import Home from './Home';
// document.getElementById("root")
import styles from "./index.module.css";
export default const App = () => {
  render() {
    return (
      <div className={styles.root}>
        <h2 className="title">我是App的標(biāo)題</h2>
        <p className="desc">我是App中的一段文字描述</p >
        <Home/>
      </div>
    )
  }
}

這種方式能夠解決局部作用域問題，但也有一定的缺陷：

• 引用的類名，不能使用連接符(.xxx-xx)，在 JavaScript 中是不識(shí)別的
• 所有的 className 都必須使用 {style.className} 的形式來編寫
• 不方便動(dòng)態(tài)來修改某些樣式，依然需要使用內(nèi)聯(lián)樣式的方式；

CSS in JS

CSS-in-JS， 是指一種模式，其中CSS由 JavaScript生成而不是在外部文件中定義

此功能并不是 React 的一部分，而是由第三方庫提供，例如：

• styled-components
• emotion
• glamorous

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

本質(zhì)是通過函數(shù)的調(diào)用，最終創(chuàng)建出一個(gè)組件：

• 這個(gè)組件會(huì)被自動(dòng)添加上一個(gè)不重復(fù)的class
• styled-components會(huì)給該class添加相關(guān)的樣式

基本使用如下：

創(chuàng)建一個(gè)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 from "react";
import { SelfLink, SelfButton } from "./style";
export default const App = () =>{
  constructor(props, context) {
    super(props);
  }  
  render() {
    return (
     <div>
       <SelfLink title="People's Republic of China">app.js</SelfLink>
       <SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>
          SelfButton
        </SelfButton>
     </div>
    );
  }
}

三、區(qū)別

通過上面四種樣式的引入，可以看到：

• 在組件內(nèi)直接使用css該方式編寫方便，容易能夠根據(jù)狀態(tài)修改樣式屬性，但是大量的演示編寫容易導(dǎo)致代碼混亂
• 組件中引入 .css 文件符合我們?nèi)粘５木帉懥?xí)慣，但是作用域是全局的，樣式之間會(huì)層疊
• 引入.module.css 文件能夠解決局部作用域問題，但是不方便動(dòng)態(tài)修改樣式，需要使用內(nèi)聯(lián)的方式進(jìn)行樣式的編寫
• 通過css in js 這種方法，可以滿足大部分場景的應(yīng)用，可以類似于預(yù)處理器一樣樣式嵌套、定義、修改狀態(tài)等

至于使用react用哪種方案引入css，并沒有一個(gè)絕對的答案，可以根據(jù)各自情況選擇合適的方案

到此這篇關(guān)于React 中引入 CSS 高階用法的方案詳解的文章就介紹到這了,更多相關(guān)React 引入 CSS內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論