快捷導(dǎo)航

react四種組件中DOM樣式設(shè)置方式詳解

更新時(shí)間：2021年10月11日 14:48:06 作者：久宇詩(shī)

這篇文章主要介紹了react之四種組件中DOM樣式設(shè)置方式,通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1、行內(nèi)樣式

想給虛擬dom添加行內(nèi)樣式，需要使用表達(dá)式傳入樣式對(duì)象的方式來(lái)實(shí)現(xiàn)
行內(nèi)樣式需要寫入一個(gè)樣式對(duì)象，而這個(gè)樣式對(duì)象的位置可以放在很多地方
例如：render函數(shù)里、組件原型上、外鏈js文件中
注意：這里的兩個(gè)括號(hào)，第一個(gè)表示我們?cè)谝狫SX里插入JS了，第二個(gè)是對(duì)象的括號(hào)

<p style={{color:'red', fontSize:'14px'}}>Hello world</p>

2、使用class

React推薦我們使用行內(nèi)樣式，因?yàn)镽eact覺(jué)得每一個(gè)組件都是一個(gè)獨(dú)立的整體

其實(shí)我們大多數(shù)情況下還是大量的在為元素添加類名，但是需要注意的是，class需要寫成className（因?yàn)楫吘故窃趯戭恓s代碼，會(huì)收到j(luò)s規(guī)則的現(xiàn)在，而class是關(guān)鍵字）

import React, { Component } from 'react'
1. 外部引入定義的樣式
import styles from './style.css'

class ClassStyle extends Component {
  render() {
    // js邏輯
    let className = cx({
      font: false
    })
    return (
      <>
        <div className={className}>hello</div>
        <p className='setstyle'>樣式</p>
        <DivContainer>
          world
        </DivContainer>
      <>
    )
  }
}

export default ClassStyle

3、classNames不同的條件添加不同的樣式

有時(shí)候需要根據(jù)不同的條件添加不同的樣式，比如：完成狀態(tài)，完成是綠色，未完成是紅色。那么這種情況下，我們推薦使用classnames這個(gè)包：
目的：
由于react原生動(dòng)態(tài)添加多個(gè)className會(huì)報(bào)錯(cuò)

import style from './style.css'
<div className={style.class1 style.class2}</div>

想要得到最終渲染的效果是：

<div class='class1 class2'></div>

下載安裝

npm i -S classnames

使用

import classnames from 'classnames'
<div className=classnames({
    'class1': true,
    'class2': true
    )>
</div>

4、css-in-js

styled-components是針對(duì)React寫的一套css-in-js框架，簡(jiǎn)單來(lái)講就是在js中寫css。npm鏈接

傳統(tǒng)的前端方案推崇"關(guān)注點(diǎn)分離"原則，HTML、CSS、JavaScript 應(yīng)該各司其職，進(jìn)行分離。
而在react項(xiàng)目中，更提倡組件化方案，自然形成了將HTML、CSS、JavaScript集中編寫管理的方式。

styled-components 應(yīng)該是CSS-in-JS最熱門的一個(gè)庫(kù)，通過(guò)styled-components，你可以使用ES6的標(biāo)簽?zāi)０遄址Z(yǔ)法，為需要styled的Component定義一系列CSS屬性，當(dāng)該組件的JS代碼被解析執(zhí)行的時(shí)候，styled-components會(huì)動(dòng)態(tài)生成一個(gè)CSS選擇器，并把對(duì)應(yīng)的CSS樣式通過(guò)style標(biāo)簽的形式插入到head標(biāo)簽里面。動(dòng)態(tài)生成的CSS選擇器會(huì)有一小段哈希值來(lái)保證全局唯一性來(lái)避免樣式發(fā)生沖突。

1.安裝

npm i -S styled-components

定義樣式
2.樣式j(luò)s文件

import styled from 'styled-components'
const Title = styled.div`
    color:red;
    font-size:16px;
    h3{
        color:blue;
        font-size:20px;
    }
`
export {
    Title
}

顯示
就像使用常規(guī) React 組件一樣使用 Title

import React, { Component } from 'react'
import { Title } from './Styles'
class App extends Component {
render() {
    return (
        <div>
            <Title>
            我只是一個(gè)標(biāo)題
            <h3>你好世界</h3>
            </Title>
        </div >
        );
    }
}
export default App

3.樣式繼承
樣式

import styled from 'styled-components'
const Button = styled.button`
    font-size: 20px;
    border: 1px solid red;
    border-radius: 3px;
`;

// 一個(gè)繼承 Button 的新組件, 重載了一部分樣式
const Button2 = styled(Button)`
    color: blue;
    border-color: yellow;
`;

export {
    Button,
    Button2
}

顯示

import React, { Component } from 'react'
import {
Button,
Button2
} from './Styles'
class App extends Component {
render() {
    return (
    <div>
        <Button>我是一個(gè)按鈕1</Button>
        <Button2>我是一個(gè)按鈕2</Button2>
    </div >
    );
}
}
export default App

4.屬性傳遞
樣式

import styled from 'styled-components'
const Input = styled.input`
    color: ${props => props.inputColor || "blue"};
    border-radius: 3px;
`;
export {
    Input
}

顯示

import React, { Component } from 'react'
import { Input } from './Styles'
class App extends Component {
render() {
    return (
    <div>
        <Input defaultValue="你好" inputColor="red"></Input>
    </div >
    );
}
}
export default App

到此這篇關(guān)于react之四種組件中DOM樣式設(shè)置方式的文章就介紹到這了,更多相關(guān)react組件DOM樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: