React Basics ~ composant de style/ inline_style

• Le style en ligne doit être écrit en Javascript.

・Le nom de la propriété doit être 'style'

・Cela ne fait aucune différence si vous définissez le style en divisant une valeur ou en le définissant directement.

・La propriété doit être écrite en écrin chameau,
comme ça fontWeight: "bold",.

・Si nous voulons écrire une propriété en style CSS (kebabcase),
Nous devons l'écrire entre « guillemets doubles » ou « guillemets simples ».
Ceci est un exemple "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;

・Avant d'appuyer sur le bouton.

・Après avoir appuyé sur le bouton.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!