React 기본~스타일링 구성요소/ inline_style

• 인라인 스타일은 자바스크립트로 작성해야 합니다.

・속성 이름은 'style'이어야 합니다

・값을 나누어 스타일을 설정하든지 직접 설정하든 상관없습니다.

・속성은 낙타 케이스로 작성해야 합니다.
이 글꼴과 같습니다Weight: "bold",.

・CSS 스타일(kebabcase)로 속성을 작성하고 싶다면
'큰따옴표'나 '작은따옴표' 안에 넣어야 합니다.
"경계 반경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!