React でのインラインスタイルの適用

1. React のインラインスタイル
2. 条件付きインラインスタイルに React する

HTML 要素またはコンポーネントのスタイリングは、フロントエンド開発者の仕事の中心です。スタイルは、HTML 要素の適切な配置と外観を確保するために不可欠です。React 開発者は、さまざまなアプローチを使用してスタイルを適用します。最も一般的な方法の 1つは、インラインスタイルを使用することです。今日の記事では、インラインスタイルを使用することのメリットとデメリットについて説明しました。

React のインラインスタイル

React 開発者は通常、コンポーネントのスタイルを設定するための好ましい方法を持っています。コンポーネントごとに個別の CSS ファイルを作成するものもあれば、すべてのスタイルを 1つのファイルに結合するものもあります。アプリケーション全体のスタイルを 1つのファイルに書き込むと、クラスの説明的な（そして一意の）名前が不足する可能性が高くなります。

インラインスタイル定義を使用すると、JavaScript と CSS 用に 2つの別々のファイルを作成せずにコンポーネントのスタイルを設定できます。このように定義されたスタイルは、グローバル CSS ルールよりも読みやすく、それらを使用すると、名前の問題が発生する可能性が低くなります。

構文

React のインラインスタイルは、HTML で使用した場合に期待するとおりに機能します。HTML の場合と同様に、React のインラインスタイルは style 属性を使用して設定されます。また、HTML と同様に、インラインスタイルも React のクラスをオーバーライドします。

それでは、違いについてお話ししましょう。JSX でコンポーネントまたは要素のスタイルを設定するには、スタイルを表すオブジェクト（またはオブジェクトへの参照）を指定する必要があります。JSX がスタイルオブジェクトを確実に解読できるようにするには、中括弧のペア内に配置する必要があります。単純なインラインスタイル宣言は次のようになります。

<h1 style={{display: "none"}}>Hi! Try edit me</h1>;

この例では、中括弧の外層により、中括弧内のオブジェクトが JavaScript 式として評価されます。

構文に関しては、React と HTML のインラインスタイルの最大の違いは、React インラインスタイルでは通常の CSS プロパティ名を使用できないことです。通常、1つの単語のみで構成されるプロパティは同じですが、複数の単語で構成されるプロパティは通常 1つの単語に結合され、camelCase で記述されます。たとえば、React スタイルでは font-size プロパティは fontSize になります。

基本的に、React のインラインスタイルは、CSS プロパティとその値に対応するキーと値のペアを持つオブジェクトとして表されます。キーと値のペアはコンマで区切る必要があります。そうしないと、エラーが発生する可能性があります。

条件付きインラインスタイルに React する

JSX コードには、有効なスタイルにコンパイルできる JavaScript オブジェクトを含めることができます。これは、スタイルを条件付きで適用できるため、非常に便利な機能です。中括弧内で JavaScript の三項演算子を使用して、スタイルを適用する必要があるインスタンスを記述するための複雑な条件を設定できます。

私たちのウェブサイトが暗いテーマと明るいテーマを持っていると想像してみましょう。コンポーネントの state オブジェクトの dark プロパティを使用して、2つのテーマを条件付きで切り替えることができます。以下にその例を示します。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    return <div>
              <h1 style={{backgroundColor: this.state.dark ? "black" : "white", color: this.state.dark ? "white" : "black"}}>
                  Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

上記は、インラインスタイルがいかに役立つかを簡単に示したものです。

上記のコードスニペットでは、スタイルオブジェクトが長すぎて、追跡が難しい場合があることに気付いたかもしれません。中括弧内にオブジェクト全体を書き込む代わりに、別の場所でオブジェクトを定義して参照することができます。インラインスタイルオブジェクトに含まれるルールが多すぎることに気付いた場合は、それを JSX の外に移動します。わかりやすい名前で変数を作成してスタイルオブジェクトを格納し、変数名を使用してそれを参照できます。このように、あなたのスタイルは読みやすくなります。これが例です。

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      dark: false
    }
  }
  render() {
    const darkThemeStyles = {
       backgroundColor: this.state.dark ? "black" : "white",
       color: this.state.dark ? "white" : "black"   
    }
    return <div>
              <h1 style={darkThemeStyles}>Hi! Try edit me</h1>
              <button onClick={() => this.setState({dark: !this.state.dark})}>Switch</button>
           </div>;
  }
}

このように、return ステートメントの下の JSX コードは読みやすく、見た目もすっきりしています。

一部の React 開発者は、読みやすく、スコープがグローバルに定義されるのではなく単一のコンポーネントに制限されているため、インラインスタイルを好みます。コンポーネントで作業している人は、コンポーネントのスタイルを簡単に理解できます。

ただし、CSS が引き続き役立つ場合があります。たとえば、JavaScript にはない:hover や他の多くのセレクターがあります。