Reactでのスタイルの書き方-jsチュートリアル-php.cn

Reactでのスタイルの書き方

coldplay.xixi

リリース： 2020-12-22 16:09:53

オリジナル

12195 人が閲覧しました

react でスタイルを記述する方法: 1. インラインスタイルを使用する; 2. className メソッドを使用する; 3. クラス名を使用してスタイルを動的に変更する; 4. [styled-components] プラグインを使用してラベルを記述するスタイル。

Reactでのスタイルの書き方

このチュートリアルの動作環境: Windows7 システム、React17 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

react での style の書き方:

1. Inline

import React, { Fragment } from "react";
class Style extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
      const txtColor = {
          color: &#39;#F00&#39;
      }
    return (
     <Fragment>
         <h1 style={txtColor}></h1>
     </Fragment>
    );
  }
}
export default Style;

ログイン後にコピー

この書き方は非推奨です。多すぎるとコードが乱雑になります!

2. className

import React, { Fragment } from "react";
import "./../../style.css";
class Style extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
     <Fragment>
         <h1 className="textColor"></h1>
     </Fragment>
    );
  }
}
export default Style;

ログイン後にコピー

を使用して新しい .css ファイルを作成し、ファイル。タグで className="textColor" を使用すると、インポートされた .css ファイルでクラス 'textColor' のスタイルを使用できます。この方法は、一般的なプロジェクトには十分です。

3. クラス名を使用してスタイルを動的に変更する

import React, { Fragment } from "react";
import classNames from &#39;classnames&#39;
class Style extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
     <Fragment>
         <h1 className={classNames(&#39;textColor&#39;, {&#39;textContent&#39;: false} ,{&#39;textTitle&#39;: true})}></h1>
     </Fragment>
    );
  }
}
export default Style;

ログイン後にコピー

スタイルを動的に変更するこの方法では、プラグインのクラス名をインストールする必要があります。上記のコードでは、h1 タグのクラスがtextColor と textTitle を含めます。これはプロジェクトの場合が一般的です。使用します。

4. styled-components プラグインを使用して、ラベルスタイルを記述します。

import React, { Fragment } from &#39;react&#39;
import styled from &#39;styled-components&#39;
const Title = styled.h1`
  color: #f00;
`
class Style extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <Fragment>
        <Title>复习style</Title>
      </Fragment>
    )
  }
}
export default Style

ログイン後にコピー

styled-components を使用して、ラベルスタイルを記述します。最初にプラグインをインストールする必要があります。上記のコードは、タイトルを定義し、styled を通じて h1 タグのスタイルを設定し、次に、で使用されるタイトルを設定します。このコンポーネントは、スタイル付きの h1 タグと同等です。この方法は、大規模なプロジェクトでより一般的です。