第一種: 在組件中直接使用style
不需要組件從外部引入css文件,直接在組件中書寫。
<code>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 (/<code>123); }}export default Test;注意事項:
在正常的css中,比如background-color,box-sizing等屬性,在style對象div1中的屬性中,必須轉換成駝峰法,backgroundColor,boxSizing。而沒有連字符的屬性,如margin,width等,則在style對象中不變。在正常的css中,css的值不需要用雙引號(""),如
<code>.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;}/<code>而在react中使用style對象的方式時。值必須用雙引號包裹起來。
這種方式的react樣式,只作用於當前組件。第二種: 在組件中引入[name].css文件
需要在當前組件開頭使用import引入css文件。
<code>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 (); }}export default Test;/<code>123<testchidren>測試子組件的樣式/<testchidren>這種方式引入的css樣式,會作用於當前組件及其所有後代組件。
我自己是一名從事了多年開發的web前端老程序員,目前辭職在做自己的web前端私人定製課程,今年我花了一個月整理了一份最適合2019年學習的web前端學習乾貨,各種框架都有整理,送給每一位前端小夥伴,想要獲取的可以關注我的頭條號並在後臺私信我:前端,即可免費獲取。
第三種: 在組件中引入[name].scss文件
引入react內部已經支持了後綴為scss的文件,所以只需要安裝node-sass即可,因為有個node-sass,scss文件才能在node環境上編譯成css文件。
<code>>yarn add node-sass/<code>然後編寫scss文件
<code>//index.scss.App{ background-color: #282c34; .header{ min-height: 100vh; color: white; }}/<code>關於如何詳細的使用sass,請查看sass官網
這種方式引入的css樣式,同樣會作用於當前組件及其所有後代組件。第四種: 在組件中引入[name].module.css文件
將css文件作為一個模塊引入,這個模塊中的所有css,只作用於當前組件。不會影響當前組件的後代組件。
<code>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 (); }}export default Test;/<code>321321<testchild>這種方式可以看做是前面第一種在組件中使用style的升級版。完全將css和組件分離開,又不會影響其他組件。
第五種: 在組件中引入 [name].module.scss文件
類似於第四種,區別是第四種引入css module,而這種是引入 scss module而已。
<code>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 (); }}export default Test;/<code>321321<testchild>同樣這種方式可以看做是前面第一種在組件中使用style的升級版。
第六種: 使用styled-components
需要先安裝
<code>>yarn add styled-components/<code>然後創建一個js文件(注意是js文件,不是css文件)
<code>//style.jsimport 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;;/<code>組件中使用styled-components樣式
<code>import React, { Component } from "react";import { SelfLink, SelfButton } from "./style";class Test extends Component { constructor(props, context) { super(props); } render() { return (<selflink>app.js/<selflink> <selfbutton> SelfButton /<selfbutton>); }}export default Test;/<code>這種方式是將整個css樣式,和html節點整體合併成一個組件。引入這個組件html和css都有了。它的好處在於可以隨時通過往組件上傳入 屬性,來動態的改變樣式。對於處理變量、媒體查詢、偽類等較方便的。
這種方式的css也只對當前組件有效。具體用法,請查看styled-components官網。
第七種: 使用radium
需要先安裝
<code>>yarn add radium/<code>然後在react組件中直接引入使用
<code>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 (<button> this is a primary button /<button>); }}export default Radium(Test);/<code>對於處理變量、媒體查詢、偽類等是不方便的。使用Radium可以直接處理變量、媒體查詢、偽類等,並且可以直接使用js中的數學,連接,正則表達式,條件,函數等。
具體用法請查看radium源碼
注意:在export之前,必須用Radium包裹
原文鏈接:https://mp.weixin.qq.com/s/9KmizfiaK0jLGnvD25BGtA
"
作者:web前端開發
閱讀更多 小白沖沖沖沖 的文章