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中文网其他相关文章！