ReactでCSSをエレガントに書く方法

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'prop-types' から PropTypes をインポートします
エクスポートデフォルトクラスインデックスはComponentを拡張します{
    静的プロパティタイプ = {
     タイトル: PropTypes.文字列
    }
    与える（） {
        const h1Style={textAlign:'center',marginBottom:'20px',lineHeight:'35px',
        高さ:'30px'}
        const {title} = this.props
        戻る （
         <div>
             <h1 style={h1Style}>{タイトル}</h1>
             <hr/>
         </div>
        ）
    }
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。
「./index.css」をインポートします
エクスポートデフォルトクラスインデックスはComponentを拡張します{
    状態={
        フラグ:true
    }
色の変更=()=>{
    this.setState((状態、プロパティ)=>{
        戻る {
           フラグ:!state.flag
        }
    })
}
    与える（） {
        const {flag} = this.state
        戻る （
            <div>
                <h1 className={flag?'blueColor':'redColor'}>髪が白くなるまで待たないでください</h1>
                <button onClick={this.changeColor} className="btnStyle">クリックしてフォントの色を変更します</button>
            </div>
        ）
    }
}

.blueColor{
    色: 青;
}
.redColor{
    色: 赤;
}
.btnスタイル{
    幅: 260ピクセル;
    高さ: 50px;
    背景色: 水色;
    色: #fff;
    境界線:なし;
    フォントサイズ: 28px;
    境界線の半径: 10px;
}

「react」からReact、{FC、useState}をインポートします。
「@/components1/cmittem」からCmittemをインポートします。
「./cmtlist.module.scss」から cssObj をインポートします。
定数コマンドリスト:FC<{}>=(props)=>{
    戻る （
        <div>
             <h1 className={cssObj.title}>コメントリスト</h1>
       
       </div>
    ）
}

デフォルトの Cmtlist をエクスポートする

'antd/dist/antd.less' をインポートします
'styled-components' から styled をインポートします
関数App() {
 const HomeWrapper = styled.div`
 フォントサイズ:50px;
 色：赤;
 スパン{
   色：オレンジ;
   ＆。アクティブ{
      色：緑;
   }
   &:ホバー{
     色:青;
     フォントサイズ:40px;
   }
   ＆：：後{
     内容:'ssss'
   }
   }
 `
  戻る （
    <div className="アプリ">
 <h1>私はタイトルです</h1>
 <ホームラッパー>
 <h2>私はサブタイトルです</h2>
   <span>カルーセル 1</span>
   <span className="active">カルーセル 2</span>
   <span>カルーセル 3</span>
   <span>カルーセル 4</span>
 </ホームラッパー>
    </div>
  );
}

デフォルトのアプリをエクスポートします。

'antd/dist/antd.less' をインポートします
'styled-components' から styled をインポートします
関数App() {
 const ChangeInput = styled.input.attrs({
   プレースホルダー:'wangsu',
   bgColor:'赤'
 })`
 背景色:#7a7ab4;
 色:${props=>props.bgColor}
 `
  戻る （
    <div className="アプリ">
 <h1>私はタイトルです</h1>
 <ChangeInput タイプ="テキスト"/>
    </div>
  );
}

デフォルトのアプリをエクスポートします。

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'styled-components' から styled をインポートします
const HYbutton = styled.button`
   色：赤;
   境界線:1px実線 #ccc;
   パディング:10px 20px;
`
//ここでは継承を使用します const XLbutton = styled(HYbutton)`
背景色:青;
`
デフォルトクラス Button をエクスポートし、Component を拡張します {

    与える（） {
        戻る （
            <div>
                <HYbutton>これはボタンです</HYbutton>
                <XLbutton>これは継承されたボタンです</XLbutton>
            </div>
        ）
    }
}