React Basics~komponen penggayaan/ inline_style

• Gaya sebaris mesti ditulis dalam Javascript.

・Nama hartanah mestilah 'gaya'

・Tidak ada bezanya sama ada anda menetapkan gaya dengan membahagikan nilai atau dengan menetapkannya secara terus.

・Harta hendaklah ditulis dalam kotak unta,
seperti fon iniBerat: "bold",.

・Jika kita mahu menulis harta dalam gaya CSS(kotak kebab),
Kita perlu menulisnya di dalam 'petikan berganda' atau 'petikan tunggal'.
Ini ialah contoh "jejari sempadan: 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;

・Sebelum menekan butang.

・Selepas menekan butang.

Atas ialah kandungan terperinci React Basics~komponen penggayaan/ inline_style. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!