React コンポーネントに CSS を追加する方法

コンポーネントにこれらの素晴らしいスタイルを適用する方法に行き詰まっていませんか?もう心配する必要はありません。ここでは、美しいデザインを実装するのに役立つ 3 つの方法について説明します。この記事を読む際には、CSS と JavaScript についてある程度の理解があると幸いです。飛び込んでみましょう!

1. CSS スタイルシートを使用します。

これには、独自の CSS スタイルを別のファイルに記述し、それをコンポーネントにインポートすることが含まれます。
ファイルに名前を付けるときは、必ず .css 拡張子を使用してください。以下のコード例を確認してください。

//CSS ファイル

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//CSS ファイルをコンポーネントにインポートします。
// CSS ファイルに任意の名前を付けます。

import './App.css';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );

}
}

1. CSS モジュールの使用

最初の方法が気に入らないか、コードの書き方が合わない可能性があります。
2 番目の方法を使用できます。ここでは、CSS を記述する別のファイルも作成しますが、今回は拡張子が異なります。 .module.css

// CSS モジュール。
// mystyle.module.css

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//モジュールをコンポーネントにインポートします。

import styles from './mystyle.module.css'; 

class Car extends React.Component {
  render() {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
}

1. インライン スタイリングの使用

style 属性 style='styles here' を使用してインライン スタイルを実現できます。ただし、style 属性に値として入るものは一般的な CSS セレクターではなく JavaScript オブジェクトであるため、注意が必要です。オブジェクトの構文を取る必要があります。

これが私が言いたいことです;

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

二重中括弧に注目してください。また、JavaScript オブジェクトの記述に使用されるキーと値のペアの構文にも注目してください。

もう 1 つ留意すべき点は、background-color などの 2 つの名前を持つプロパティを記述するときは、キャメルケースの backgroundColor を使用する必要があるということです

ヒント: すべてのスタイリング コードを使用してオブジェクトを作成し、それを style 属性で呼び出すことができます。

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

二重中括弧がないことに注意してください。

これがお役に立ち、楽しんで読んでいただければ幸いです。次回書く記事を改善するためにフィードバックを歓迎します。ありがとうございます

以上がReact コンポーネントに CSS を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。