4つのReactコンポーネントにおけるDOMスタイル設定の詳細な説明

React をインポートします。{ コンポーネント } を 'react' からインポートします。
1. 外部で定義されたスタイルをインポートする './style.css' からスタイルをインポートする

クラスClassStyleはComponentを拡張します{
  与える（） {
    // js ロジック let className = cx({
      フォント: false
    })
    戻る （
      <>
        <div className={className}>こんにちは</div>
        <p className='setstyle'>スタイル</p>
        <Divコンテナ>
          世界
        </DivContainer>
      <>
    ）
  }
}

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

'./style.css' からスタイルをインポートします
<div className={style.class1 style.class2}</div>

'classnames' からクラス名をインポートします
<div className=クラス名({
    'class1': 真、
    'クラス2': 真
    )>
</div>

'styled-components' から styled をインポートします
const タイトル = styled.div`
    色：赤;
    フォントサイズ:16px;
    h3{
        色:青;
        フォントサイズ:20px;
    }
`
輸出 {
    タイトル
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./Styles' から { Title } をインポートします
クラスAppはComponentを拡張します{
与える（） {
    戻る （
        <div>
            <タイトル>
            私はただのタイトルです <h3>Hello World</h3>
            </タイトル>
        </div>
        );
    }
}
デフォルトアプリをエクスポート

'styled-components' から styled をインポートします
const ボタン = styled.button`
    フォントサイズ: 20px;
    境界線: 1px 実線の赤;
    境界線の半径: 3px;
`;

// Button を継承し、いくつかのスタイルをオーバーライドする新しいコンポーネント const Button2 = styled(Button)`
    色: 青;
    境界線の色: 黄色;
`;

輸出 {
    ボタン、
    ボタン2
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。
輸入 {
ボタン、
ボタン2
} './Styles' から
クラスAppはComponentを拡張します{
与える（） {
    戻る （
    <div>
        <Button>私はボタン1です</Button>
        <Button2>私はボタン2です</Button2>
    </div>
    );
}
}
デフォルトアプリをエクスポート

'styled-components' から styled をインポートします
const 入力 = styled.input`
    色: ${props => props.inputColor || "青"};
    境界線の半径: 3px;
`;
輸出 {
    入力
}

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'./Styles' から { Input } をインポートします
クラスAppはComponentを拡張します{
与える（） {
    戻る （
    <div>
        <Input defaultValue="Hello" inputColor="red"></Input>
    </div>
    );
}
}
デフォルトアプリをエクスポート