私たちは皆、の標準的な方法に精通しています スタイルシートをリンクする <head> HTMLドキュメントのですよね？ これは、CSSを作成できるいくつかの方法のXNUMXつにすぎません。 しかし、Reactプロジェクトのように、シングルページアプリケーション（SPA）でスタイルを設定するのはどのように見えますか？
Reactアプリケーションのスタイリングにはいくつかの方法があります。 従来のスタイルと重なるものもあれば、それほど重ならないものもあります。 しかし、私たちがそれを行うことができるすべての方法を数えましょう。
外部スタイルシートのインポート
名前が示すように、ReactはCSSファイルをインポートできます。 このプロセスは、CSSファイルをHTMLでリンクする方法と似ています。 <head>:
- プロジェクトディレクトリに新しいCSSファイルを作成します。
- CSSを作成します。
- それをReactファイルにインポートします。
いいね：
import "./style.css";これは通常、他のインポートが行われるファイルの先頭にあります。
import { React } from "react";
import "./Components/css/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;この例では、CSSファイルがにインポートされます App.js /Components/css フォルダにコピーします。
インラインスタイルを書く
インラインスタイリングは保守性などにそれほど優れているわけではないということを聞いたことがあるかもしれませんが、確かに状況はあります（これがXNUMXつです！）それが理にかなっているところ。 とにかくCSSはすでに同じファイル内にあることが多いため、Reactでは保守性はそれほど問題になりません。
これは、Reactのインラインスタイリングの非常に単純な例です。
<div className="main" style={{color:"red"}}>ただし、より良いアプローチは、オブジェクトを使用することです。
- まず、さまざまな要素のスタイルを含むオブジェクトを作成します。
- 次に、を使用して要素に追加します
style属性を選択してから、スタイルを設定するプロパティを選択します。
コンテキストでそれを見てみましょう：
import { React } from "react";
function App() {
const styles = {
main: {
backgroundColor: "#f1f1f1",
width: "100%",
},
inputText: {
padding: "10px",
color: "red",
},
};
return (
<div className="main" style={styles.main}>
<input type="text" style={styles.inputText}></input>
</div>
);
}
export default App;この例には、 styles さらにXNUMXつのオブジェクトを含むオブジェクト。XNUMXつは .main クラスともうXNUMXつはテキスト入力用で、外部スタイルシートに表示されるものと同様のスタイルルールが含まれています。 これらのオブジェクトは、 style 返されたマークアップにある要素の属性。
普通のHTMLで通常使用する引用符ではなく、スタイルを参照するときに中括弧が使用されることに注意してください。
CSSモジュールを使用する
CSSモジュール…それらに一体何が起こったのでしょう？ これらはローカルスコープの変数の利点があり、Reactと一緒に使用できます。 しかし、彼らはまた、正確には何ですか？
引用 レポのドキュメント:
CSSモジュールは、個々のCSSファイルをCSSとデータの両方にコンパイルすることで機能します。 CSS出力は通常のグローバルCSSであり、ブラウザーに直接挿入するか、連結して本番環境で使用するためにファイルに書き込むことができます。 このデータは、ファイルで使用した人間が読める形式の名前を、グローバルに安全な出力CSSにマップするために使用されます。
簡単に言うと、CSSモジュールでは、各クラス名に一意のプログラム名が付けられているため、衝突することなく複数のファイルで同じクラス名を使用できます。 これは、大規模なアプリケーションで特に役立ちます。 すべてのクラス名は、インポートされる特定のコンポーネントにローカルでスコープされます。
CSSモジュールのスタイルシートは通常のスタイルシートに似ていますが、拡張子が異なります（例： styles.module.css）。 設定方法は次のとおりです。
- でファイルを作成する
.module.css拡張子として。 - そのモジュールをReactアプリにインポートします（前に見たように）
- 加える
className要素またはコンポーネントに移動し、インポートされたスタイルから特定のスタイルを参照します。
超簡単な例:
/* styles.module.css */
.font {
color: #f00;
font-size: 20px;
}
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello World</h1>
);
}
export default App;スタイル付きコンポーネントを使用する
あなたが使用している スタイル付きコンポーネント？ これは非常に人気があり、JavaScriptで実際のCSSを使用してカスタムコンポーネントを構築できます。 スタイル付きコンポーネントは、基本的に、スタイルを備えたReactコンポーネントです。 一部の機能には、一意のクラス名、動的なスタイル設定、および各コンポーネントに独自の個別のスタイルがあるため、CSSのより適切な管理が含まれます。
コマンドラインにstyled-componentsnpmパッケージをインストールします。
npm install styled-components次に、それをReactアプリにインポートします。
import styled from 'styled-components'コンポーネントを作成し、それにスタイル付きプロパティを割り当てます。 でバッククォートで示されるテンプレートリテラルの使用に注意してください Wrapper オブジェクト：
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 100%;
height: 100px;
background-color: red;
display: block;
`;
return <Wrapper />;
}
export default App;上記 Wrapper コンポーネントは、これらのスタイルを含むdivとしてレンダリングされます。
条件付きスタイリング
スタイル付きコンポーネントの利点のXNUMXつは、CSS内で小道具を使用できるように、コンポーネント自体が機能することです。 これにより、条件付きステートメントや、状態または小道具に基づいてスタイルを変更するための扉が開かれます。
これを披露するデモは次のとおりです。
ここでは、divを操作しています display 表示状態のプロパティ。 この状態は、クリックするとdivの状態を切り替えるボタンによって制御されます。 これにより、XNUMXつの異なる状態のスタイルが切り替わります。
インライン if ステートメント、私たちは使用します ? 通常の代わりに if/else 構文。 NS else 一部はセミコロンの後にあります。 また、初期化された後は、常に状態を呼び出すか使用することを忘れないでください。 たとえば、その最後のデモでは、状態は Wrapper コンポーネントのスタイル。
Happy Reactスタイリング！
皆さん、これで終わりです。 Reactアプリケーションでスタイルを作成するためのいくつかの異なる方法を検討しました。 そして、それはXNUMXつが他よりも優れているわけではありません。 もちろん、使用するアプローチは状況によって異なります。 うまくいけば、あなたはそれらをよく理解し、Reactスタイリングアーセナルにたくさんのツールがあることを知っています。
