react之四種元件中DOM樣式設定方式

久宇詩發表於2021-10-11

1、行內樣式

想給虛擬dom新增行內樣式,需要使用表示式傳入樣式物件的方式來實現
行內樣式需要寫入一個樣式物件,而這個樣式物件的位置可以放在很多地方
例如:render函式裡、元件原型上、外鏈js檔案中
注意:這裡的兩個括號,第一個表示我們在要JSX裡插入JS了,第二個是物件的括號

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

2、使用class

React推薦我們使用行內樣式,因為React覺得每一個元件都是一個獨立的整體

其實我們大多數情況下還是大量的在為元素新增類名,但是需要注意的是,class需要寫成className(因為畢竟是在寫類js程式碼,會收到js規則的現在,而class是關鍵字)

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不同的條件新增不同的樣式

有時候需要根據不同的條件新增不同的樣式,比如:完成狀態,完成是綠色,未完成是紅色。那麼這種情況下,我們推薦使用classnames這個包:
目的:
由於react原生動態新增多個className會報錯

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

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

<div class='class1 class2'></div>
  1. 下載安裝
    npm i -S classnames
    
  2. 使用
    import classnames from 'classnames'
    <div className=classnames({
        'class1': true,
        'class2': true
        )>
    </div>
    

4、css-in-js

styled-components是針對React寫的一套css-in-js框架,簡單來講就是在js中寫css。npm連結

  • 傳統的前端方案推崇"關注點分離"原則,HTML、CSS、JavaScript 應該各司其職,進行分離。
  • 而在react專案中,更提倡元件化方案,自然形成了將HTML、CSS、JavaScript集中編寫管理的方式。

styled-components 應該是CSS-in-JS最熱門的一個庫,通過styled-components,你可以使用ES6的標籤模板字串語法,為需要styled的Component定義一系列CSS屬性,當該元件的JS程式碼被解析執行的時候,styled-components會動態生成一個CSS選擇器,並把對應的CSS樣式通過style標籤的形式插入到head標籤裡面。動態生成的CSS選擇器會有一小段雜湊值來保證全域性唯一性來避免樣式發生衝突。

  1. 安裝
npm i -S styled-components
  1. 定義樣式
    樣式js檔案
    import styled from 'styled-components'
    const Title = styled.div`
        color:red;
        font-size:16px;
        h3{
            color:blue;
            font-size:20px;
        }
    `
    export {
        Title
    }
    
    顯示
    就像使用常規 React 元件一樣使用 Title
    import React, { Component } from 'react'
    import { Title } from './Styles'
    class App extends Component {
    render() {
        return (
            <div>
                <Title>
                我只是一個標題
                <h3>你好世界</h3>
                </Title>
            </div >
            );
        }
    }
    export default App
    
  2. 樣式繼承
    樣式
    import styled from 'styled-components'
    const Button = styled.button`
        font-size: 20px;
        border: 1px solid red;
        border-radius: 3px;
    `;
    
    // 一個繼承 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>我是一個按鈕1</Button>
            <Button2>我是一個按鈕2</Button2>
        </div >
        );
    }
    }
    export default App
    
  3. 屬性傳遞
    樣式
    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
    

相關文章