React:Elementにスタイルを追加する

43809 ワード

エリメントにスタイルを着せましょう。

<body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <style>
      .button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }

      .button2 {
        background-color: #008cba;
      } /* Blue */
      .button3 {
        background-color: #f44336;
      } /* Red */
      .button4 {
        background-color: #e7e7e7;
        color: black;
      } /* Gray */
      .button5 {
        background-color: #555555;
      } /* Black */
    </style>

    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const element = (
        <>
          <button className="button">Green</button>
          <button className="button button2">Blue</button>
          <button className="button button3">Red</button>
          <button className="button button4">Gray</button>
					<button className="button button5">Black</button>
					// 다른 엘레멘트 들과 혼동 될수 있기 때문에
					**// button에도 class가 아닌 className 을 준다.(형평성)**
        </>
      );

      ReactDOM.render(element, rootElement);
    </script>
  </body>

共通のボタンはbuttonで刺して、色に新しいレベルを変えただけです。

意味のあるクラス名に変更します.

スタイル属性が追加されました.(行内)

<body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <style>
      .button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }

      **.blue** {
        background-color: #008cba;
      } 
      .**red** {
        background-color: #f44336;
      } 
      .**gray** {
        background-color: #e7e7e7;
        color: black;
      } 
      .**black** {
        background-color: #555555;
      } 
    </style>

    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const element = (
        <>
          <button className="button" style={{ borderRadius: "50%" }}>
            Green
          </button>
          <button className="button **blue**" style={{ borderRadius: "8px" }}>
            Blue
          </button>
          <button className="button **red**">Red</button>
          <button className="button **gray**">Gray</button>
          <button className="button **black**">Black</button>
        </>
      );

      ReactDOM.render(element, rootElement);
    </script>
  </body>

反応の利点を生かす

REACTの利点は、JSとHTMLを混在させて使用するJSXで、その中で関数など様々なものを作成できることです.
関数に変えてみましょう

function Button({ props }) {
        return <button {...props} />;
      }

うん.
もちろんです.propsが入っているからです.(でアトリビュートを個別に配置)
propsにはすべての属性の情報があります.

			 <>
          <button className="button" **style={{ borderRadius: "50%" }}**>
            Green
          </button>
          <button className="button blue" **style={{ borderRadius: "8px" }}**>
            Blue
          </button>
          <button className="button red">Red</button>
          <button className="button gray">Gray</button>
          <button className="button black">Black</button>
        </>

もう一度書けば、次のように思える.

function Button( {className, style, ...rest} ) {
        return <button {...props} />;
      }

適用を試みる。

	<script type="text/babel">
      const rootElement = document.getElementById("root");

		// *** Point 1 ***
      function Button({ className, color, style, ...rest }) { 
        return (
          <button
            className={`button ${className} ${color}`} 
            style={{ fontSize: 50, ...style }}
            {...rest}
          />
        );
      }

      const element = (
        <>
          <Button className="button" style={{ borderRadius: "50%" }}>
            Green
          </Button>
					// *** Point 2 ***
          <Button
            className="color blue"
            style={{ **fontSize: 15**, borderRadius: "8px" }} 
          >
            Blue
          </Button>
          <Button className="color red">Red</Button>
          <Button className="color gray">Gray</Button>
          <Button className="color black">Black</Button>
        </>
      );

      ReactDOM.render(element, rootElement);
    </script>

	// *** 1 ***
      function Button({ className, **color**, style, ...rest }) { 
        return (
          <button
            className={`button ${className} ${**color**}`} 
            style={{ fontSize: 50, ...style }}
            {...rest}
          />
        );
      }

* Point 1 *

エルリゲートの属性で、パラメータに入っていなければ...restで処理する
className=button blueに等しい.

別名のclassNameをcolorに変更するにはどうすればいいですか?

const element = (
        <>
          <Button color="button" style={{ borderRadius: "50%" }}>
            Green
          </Button>
          <Button color="blue" style={{ **fontSize: 15,** borderRadius: "8px" }}>
            Blue
          </Button>
          <Button color="red">Red</Button>
          <Button color="gray">Gray</Button>
          <Button color="black">Black</Button>
        </>
      );

propsをclassNameからcolorに変換すると、elementのclassNameは意味を失います.

function Button({ **color**, style, ...rest }) {
        return (
          <button
            className={`button ${**color**}`}
            style={{ fontSize: 50, ...style }}
            {...rest}
          />
        );
      }

パラメータは属性自体を受け入れます.

* Point 2 *

// *** 2 ***
          <Button
            className="color blue"
            style={{ **fontSize: 15**, borderRadius: "8px" }} >
            Blue
          </Button>

上の要素と関数を使用して、共通の部分がスタイルに移動されます.
customが必要な部分は、インラインスタイルを使用できます.

レスポンススタイルの優先度

「行内ラベルのプロパティ」>「パラメータのプロパティ」>「className」
または
style > className

整理する

反応元素に様式を加える

className→文字列(CSSに渡す場合)
スタイル→オブジェクトより先に、Camelキャビネット、className(インラインスタイル)
優先度→style>className

Reference

この問題について(React:Elementにスタイルを追加する), 我々は、より多くの情報をここで見つけました https://velog.io/@coil/React-Element-에-스타일-입히기

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

どのように私は私のサイトのSVGのロゴを作った

[規格1260]BFSとDFS Java