So ändern Sie den CSS-Stil in React

So ändern Sie den CSS-Stil in React: 1. Fügen Sie dynamisch eine Klasse mit Code wie „handleshow() {this.setState({display:true})}…“ hinzu. 2. Fügen Sie dynamisch einen Stil mit Code hinzu, z als „Klasse Demo erweitert Component{...}“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, React18-Version, Dell G3-Computer.

Wie ändere ich den CSS-Stil in React? ?

Zwei Möglichkeiten, CSS-Stile in React dynamisch zu ändern

Die erste: dynamisch eine Klasse hinzufügen, auf die Schaltfläche klicken, um den Text als Demo ein- und auszublenden

import React, { Component, Fragment } from 'react';
import './style.css';
class Demo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            display: true
        }
        this.handleshow = this.handleshow.bind(this)
        this.handlehide = this.handlehide.bind(this)
    }
    render() {
        return (
            <Fragment>
                {/*动态添加一个class来改变样式*/}
                <p className={this.state.display?"active":"active1"}>你是我的唯一</p>
                <button onClick={this.handlehide}>点击隐藏</button>
                <button onClick={this.handleshow}>点击显示</button>
            </Fragment>
        )
    }
    handleshow() {
        this.setState({
            display:true
        })
    }
    handlehide() {
        this.setState({
            display:false
        })
    }
}
export default Demo;

CSS-Code:

 .active{
      display: block;
  }
  .active1{
    display: none;
  }

Die zweite: dynamisch Fügen Sie einen Stil hinzu. Klicken Sie auf die Schaltfläche, um den Text als Demo anzuzeigen und auszublenden. Zusammenfassung: Verwenden Sie die Klasse, um den CSS-Stil zu ändern. Sie können mehrere sich dynamisch ändernde CSS-Attribute schreiben. Es sieht nicht überladen aus, aber wenn Sie Stil verwenden Wenn Sie mehrere CSS-Attribute schreiben, sieht es kompliziert aus. Dies sind alles persönliche Meinungen, bitte weisen Sie auf etwaige Mängel hin

Lernempfehlung: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonSo ändern Sie den CSS-Stil in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!