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中文網其他相關文章！