Wie man mit React elegant CSS schreibt

importiere React, {Komponente} von 'react'
Importiere PropTypes aus „Prop-Types“
exportiere Standardklassenindex erweitert Komponente {
    statische Eigenschaftentypen = {
     Titel: PropTypes.string
    }
    rendern() {
        const h1Style={textAlign:'center',marginBottom:'20px',lineHeight:'35px',
        Höhe:'30px'}
        const {title} = diese.props
        zurückkehren (
         <div>
             <h1 style={h1Style}>{Titel}</h1>
             <hr/>
         </div>
        )
    }
}

importiere React, {Komponente} von 'react'
importiere "./index.css"
exportiere Standardklassenindex erweitert Komponente {
    Zustand={
        Flagge: wahr
    }
Farbe ändern=()=>{
    this.setState((Zustand, Eigenschaften)=>{
        zurückkehren {
           Flagge:!Staat.Flagge
        }
    })
}
    rendern() {
        const {flag}=dieser.Zustand
        zurückkehren (
            <div>
                <h1 className={flag?'blueColor':'redColor'}>Warten Sie nicht, bis Ihre Haare grau werden</h1>
                <button onClick={this.changeColor} className="btnStyle">Klicken, um die Schriftfarbe zu ändern</button>
            </div>
        )
    }
}

.blaueFarbe{
    Farbe: blau;
}
.roteFarbe{
    Farbe: rot;
}
.btnStyle{
    Breite: 260px;
    Höhe: 50px;
    Hintergrundfarbe: Aqua;
    Farbe: #fff;
    Rand: keiner;
    Schriftgröße: 28px;
    Rahmenradius: 10px;
}

importiere React, {FC,useState} von "react"
importiere Cmittem von "@/components1/cmittem"
importiere cssObj aus "./cmtlist.module.scss"
const Cmtlist:FC<{}>=(props)=>{
    zurückkehren (
        <div>
             <h1 className={cssObj.title}>Kommentareliste</h1>
       
       </div>
    )
}

Standard-Befehlsliste exportieren

importiere 'antd/dist/antd.less'
Importieren Sie Stile aus „Stilkomponenten“.
Funktion App() {
 const HomeWrapper = styled.div`
 Schriftgröße: 50px;
 Farbe: rot;
 Spanne{
   Farbe: orange;
   &.aktiv{
      Farbe: grün;
   }
   &:schweben{
     Farbe: blau;
     Schriftgröße: 40px;
   }
   &::nach{
     Inhalt: „ssss“
   }
   }
 `
  zurückkehren (
    <div Klassenname="App">
 <h1>Ich bin ein Titel</h1>
 <HomeWrapper>
 <h2>Ich bin ein Untertitel</h2>
   <span>Karussell 1</span>
   <span className="active">Karussell 2</span>
   <span>Karussell 3</span>
   <span>Karussell 4</span>
 </HomeWrapper>
    </div>
  );
}

Standard-App exportieren;

importiere 'antd/dist/antd.less'
Importieren Sie Stile aus „Stilkomponenten“.
Funktion App() {
 const ChangeInput = styled.input.attrs({
   Platzhalter: 'wangsu',
   Hintergrundfarbe: „rot“
 })`
 Hintergrundfarbe: #7a7ab4;
 Farbe:${props=>props.bgColor}
 `
  zurückkehren (
    <div Klassenname="App">
 <h1>Ich bin ein Titel</h1>
 <ChangeInput Typ="Text"/>
    </div>
  );
}

Standard-App exportieren;

importiere React, {Komponente} von 'react'
Importieren Sie Stile aus „Stilkomponenten“.
const HYbutton = styled.button`
   Farbe: rot;
   Rand: 1px durchgezogen #ccc;
   Polsterung: 10px 20px;
`
//Hier verwenden wir Vererbung const XLbutton = styled(HYbutton)`
Hintergrundfarbe: blau;
`
exportiere Standardklasse Button erweitert Komponente {

    rendern() {
        zurückkehren (
            <div>
                <HYbutton>Dies ist eine Schaltfläche</HYbutton>
                <XLbutton>Dies ist eine geerbte Schaltfläche</XLbutton>
            </div>
        )
    }
}