第一種: 在組件中直接使用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 ( <div style={div1}>123</div> <div style=""> ); } } export default Test;注意事項:
- 在正常的css中，比如background-color，box-sizing等屬性，在style對象div1中的屬性中，必須轉換成駝峰法，backgroundColor，boxSizing。而沒有連字符的屬性，如margin，width等，則在style對象中不變。
- 在正常的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; }而在react中使用style對象的方式時。值必須用雙引號包裹起來。
這種方式的react樣式，只作用於當前組件。
第二種: 在組件中引入[name].css文件
需要在當前組件開頭使用import引入css文件。
import React, { Component } from "react"; import TestChidren from "./TestChidren"; import "@/assets/css/index.scss"; class Test extends Component { constructor(props, context) { super(props); } render() { return ( <div> <div className="link-name">123</div> <TestChidren>測試子組件的樣式</TestChidren> </div> ); } } export default Test;這種方式引入的css樣式，會作用於當前組件及其所有后代組件。
第三種: 在組件中引入[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 ( <div> <div className={moduleCss.linkName}>321321</div> <TestChild></TestChild> </div> ); } } 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 ( <div> <div className={moduleCss.linkName}>321321</div> <TestChild></TestChild> </div> ); } } 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.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; `;組件中使用styled-components樣式
import React, { Component } from "react"; import { SelfLink, SelfButton } from "./style"; class Test extends Component { 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> ); } } export default Test;這種方式是將整個css樣式，和html節點整體合並成一個組件。引入這個組件html和css都有了。
它的好處在於可以隨時通過往組件上傳入 屬性，來動態的改變樣式。對於處理變量、媒體查詢、偽類等較方便的。
這種方式的css也只對當前組件有效。
具體用法，請查看styled-components官網
廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com
第七種: 使用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 ( <div> <button style={[ styles.base, styles.primary ]}> this is a primary button </button> </div> ); } } export default Radium(Test); 對於處理變量、媒體查詢、偽類等是不方便的。
使用Radium可以直接處理變量、媒體查詢、偽類等，並且可以直接使用js中的數學，連接，正則表達式，條件，函數等。
具體用法請查看radium官網
注意:
在export之前，必須用Radium包裹。