首頁>技術>

第一種: 在元件中直接使用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>       <div style={div1}>123</div>       <div style="background-color:red;">     </div>    );  }}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.css";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.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;;

元件中使用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官網。

第七種: 使用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包裹

原文連結:/file/2020/01/13/20200113135148_21803.jpg

最新評論
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • 2019年最適合C/C++開發人員的IDE