React Basics~Styling-Komponente/ inline_style

• Der Inline-Stil muss in Javascript geschrieben sein.

・Der Name der Eigenschaft muss „style“ lauten

・Es macht keinen Unterschied, ob Sie den Stil durch Teilen eines Werts oder durch direktes Festlegen festlegen.

・Die Eigenschaft muss in Kamelschrift geschrieben werden,
wie diese Schriftart: „bold“,.

・Wenn wir Eigenschaften im CSS-Stil (Kebabcase) schreiben möchten,
Wir müssen es in „doppelte Anführungszeichen“ oder „einfache Anführungszeichen“ schreiben.
Dies ist ein Beispiel für „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;

・Vor dem Drücken der Taste.

・Nach dem Drücken der Taste.

Das obige ist der detaillierte Inhalt vonReact Basics~Styling-Komponente/ inline_style. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!