React 中使用CSS的7種方法

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

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

import react,  from "react";const div1 = ;

class test extends component 
render() 
}export default test;

在正常的css中，比如background-color，box-sizing等屬性，在style物件div1中的屬性中，必須轉換成駝峰法，backgroundcolor，boxsizing。而沒有連字元的屬性，如margin，width等，則在style物件中不變。

在正常的css中，css的值不需要用雙引號("")，如

background-color: #282c34;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-size: calc(10px + 2vmin);

color: white;}

而在react中使用style物件的方式時。值必須用雙引號包裹起來。

這種方式的react樣式，只作用於當前元件。

第二種: 在元件中引入[name].css檔案

需要在當前元件開頭使用import引入css檔案。

import react,  from "react";

import testchidren from "./testchidren";
import "@/assets/css/index.css";
class test extends component 
render() 
}export default test;

第三種: 在元件中引入[name].scss檔案

引入react內部已經支援了字尾為scss的檔案，所以只需要安裝node-sass即可，因為有個node-sass，scss檔案才能在node環境上編譯成css檔案。

>yarn add node-sass

background-color: #282c34;

.header}

關於如何詳細的使用sass，請檢視sass官網

這種方式引入的css樣式，同樣會作用於當前元件及其所有後代元件。

第四種: 在元件中引入[name].module.css檔案

將css檔案作為乙個模組引入，這個模組中的所有css，只作用於當前元件。不會影響當前元件的後代元件。

import react,  from "react";

import testchild from "./testchild";
import modulecss from "./test.module.css";
class test extends component 
render() 
}export default test;

第五種: 在元件中引入 [name].module.scss檔案

類似於第四種，區別是第四種引入css module，而這種是引入 scss module而已。

import react,  from "react";import testchild from "./testchild";

import modulecss from "./test.module.scss";
class test extends component 
render() 
}export default test;

第六種: 使用styled-components

需要先安裝

>yarn add styled-components

styled,  from "styled-components";

export const selflink = styled.div`
height: 50px;
border: 1px solid red;
color: yellow;
`;export const selfbutton = styled.div`
height: 150px;
width: 150px;
color: $;
background-image: url($);
background-size: 150px 150px;
;

import react,  from "react";import  from "./style";

class test extends component 
render() 
}export default test;

這種方式的css也只對當前元件有效。具體用法，請檢視styled-components官網。

第七種: 使用radium

需要先安裝

>yarn add radium

import react,  from "react";import radium from 'radium';

let styles = 
},primary: ,
warning: 
};class test extends component 
render() 
}export default radium(test);

具體用法請檢視radium原始碼

注意：在export之前，必須用radium包裹

React 中使用CSS的幾種方式

不需要元件從外部引入css檔案，直接在元件中書寫。import react,from react const div1 class test extends component render 123 div background color red div export default test 注...

react中使用css的7中方式 應該是最全的

不需要元件從外部引入css檔案，直接在元件中書寫。import react,from react const div1 class test extends component render export default test 注意事項 1.在正常的css中，比如background color...

react中使用css的7中方式 應該是最全的

不需要元件從外部引入css檔案，直接在元件中書寫。import react,from react const div1 class test extends component render export default test 注意事項 1.在正常的css中，比如background color...