Reactでのスタイルの書き方

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

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

react での style の書き方:

1. Inline

import React, { Fragment } from "react";
class Style extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
      const txtColor = {
          color: '#F00'
      }
    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 'classnames'
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 'react'
import styled from 'styled-components'
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 タグと同等です。この方法は、大規模なプロジェクトでより一般的です。

関連する無料学習の推奨事項: javascript# ＃＃＃＃＃（ビデオ）＃＃＃＃＃＃＃＃＃

以上がReactでのスタイルの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。