react中使用css的七種方法介紹（附程式碼）-css教學-PHP中文網

這篇文章帶給大家的內容是關於react中使用css的七種方法介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

第一種: 在元件中直接使用style

不需要元件從外部引入css文件，直接在元件中書寫。

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
  
 ); } } export default Test;注意事項:
1.在正常的css中，例如background-color，box-sizing等屬性，在style物件p1中的屬性中，必須轉換成駝峰法，backgroundColor，boxSizing 。而沒有連字符的屬性，如margin，width等，則在style物件中不變。 
2.在正常的css中，css的值不需要用雙重引好("")，如
 .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; }
        
         登入後複製
        
       
       3.不能直接使用字串寫style,會報錯
       
         
 而在react中使用style物件的方式時。值必須用雙引號包裹起來。 
 這種方式的react樣式，只作用於目前元件。 
 第二種: 在元件中引入[name].css檔案
 需要在目前元件開頭使用import引入css檔案。 
 import React, { Component } from "react"; import TestChidren from "./TestChidren"; import "@/assets/css/index.css"; class Test extends Component { constructor(props, context) { super(props); } render() { return (  123
 测试子组件的样式 
 ); } } export default Test;
        
         登入後複製
        
       
       這種方式引入的css樣式，會作用於目前元件及其所有後代元件。
       第三種: 3、在元件中引入[name].scss文件
       #react內部已經支援了後綴為scss的文件，所以只需要安裝node -sass即可，因為有了node-sass，scss檔才能在node環境上編譯成css檔。
       
        >yarn add node-sass
        
         登入後複製
        
       
       然後寫scss檔
       
        //index.scss .App{ background-color: #282c34; .header{ min-height: 100vh; color: white; } }
        
         登入後複製
        
       
       關於如何詳細的使用sass，請查看sass官網
       這種方式引入的css樣式，同樣會作用於當前組件及其所有後代組件。
       第四種: 在元件中引入[name].module.css檔案
       #將css檔案引入，這個模組中的所有css，只作用於當前組件。不會影響目前組件的後代組件。
       
        import React, { Component } from "react"; import TestChild from "./TestChild"; import moduleCss from "./test.module.css"; class Test extends Component { constructor(props, context) { super(props); } render() { return (  321321
  
 ); } } export default Test;
        
         登入後複製
        
       
       這種方式可以看做是前面第一個在元件中使用style的升級版。完全將css和元件分離開，又不會影響其他元件。
       第五種: 在元件中引入[name].module.scss檔
       #類似於第四種，差異是第四種引入css module，而這種是引入scss module而已。
       
        import React, { Component } from "react"; import TestChild from "./TestChild"; import moduleCss from "./test.module.scss"; class Test extends Component { constructor(props, context) { super(props); } render() { return (  321321
  
 ); } } export default Test;
        
         登入後複製
        
       
       同樣這種方式可以看做是前面第一種在元件中使用style的升級版。
       第六種: 使用styled-components
       需要先安裝
       
        >yarn add styled-components
        
         登入後複製
        
       
       然後建立一個js檔案(注意是js文件，不是css文件)
       
        //style.js import styled, { createGlobalStyle } from "styled-components"; export const SelfLink = styled.p` height: 50px; border: 1px solid red; color: yellow; `; export const SelfButton = styled.p` height: 150px; width: 150px; color: ${props => props.color}; background-image: url(${props => props.src}); background-size: 150px 150px; `;
        
         登入後複製
        
       
       元件中使用styled-components樣式
       
        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;
        
         登入後複製
        
       
       這種方式是將整個css樣式，和html節點整體合併成一個元件。引入這個元件html和css都有了。
它的好處是可以隨時透過往元件上傳入 屬性，來動態的改變樣式。對於處理變數、媒體查詢、偽類等較方便的。
       這種方式的css也只對目前元件有效。
       特定用法，請查看styled-components官網
       第七種: 使用radium
       需要先安裝
       
        >yarn add radium
        
         登入後複製
        
       
       然後在react元件中直接引入使用
       
        import React, { Component } from "react"; import Radium from 'radium'; let styles = { base: { color: '#fff', ':hover': { background: '#0074d9' } }, primary: { background: '#0074D9' }, warning: { background: '#FF4136' } }; class Test extends Component { constructor(props, context) { super(props); } render() { return (   
 ); } } export default Radium(Test);
        
         登入後複製
        
       
       對於處理變數、媒體查詢、偽類別等是不方便的。
       使用Radium可以直接處理變數、媒體查詢、偽類別等，並且可以直接使用js中的數學，連接，正規表達式，條件，函數等。
       具體用法請看radium官網
       注意:在export之前，必須用Radium包裹。
       這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的CSS影片教學專欄！
       #