React の基本~スタイリング コンポーネント/ inline_style

• インライン スタイルは Javascript で記述する必要があります。

・プロパティの名前は「style」である必要があります

・スタイルは値を分割して設定しても、直接設定しても違いはありません。

・プロパティはキャメルケースで記述する必要があります。
このように fontWeight: "bold",.

・プロパティをCSSスタイル(kebabcase)で書きたい場合は、
「ダブルクォーテーション」または「シングルクォーテーション」で囲んで記述する必要があります。
これは「border-radius: 9999,.

」の例です。

・src/Example.js

import { useState } from "react";

const Example = () => {
  const [isSelected, setIsSelected] = useState(false);

  const clickHandler = () => setIsSelected((prev) => !prev);

  const style = {
    width: 120,
    height: 60,
    display: "block",
    fontWeight: "bold",
    "border-radius": 9999,
    cursor: "pointer",
    border: "none",
    margin: "auto",
    background: isSelected ? "pink" : "",
  };

  return (
    <>
      <button style={style} onClick={clickHandler}>
        Button
      </button>
      <div style={{ textAlign: "center" }}>{isSelected && "Clicked!"}</div>
    </>
  );
};

export default Example;

・ボタンを押す前

・ボタンを押した後。

以上がReact の基本~スタイリング コンポーネント/ inline_styleの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。