React 基础知识~样式组件/ inline_style

php中文网 2024-10-15 12:15:34

内联样式必须用javascript编写。

・属性名称必须是“style”

・无论是通过除以值来设置样式还是直接设置样式都没有区别。

・属性必须以驼峰大小写书写，
像这样的 fontweight: "bold",.

・如果我们想用 css 样式（kebabcase）编写属性，
我们需要将其写在“双引号”或“单引号”内。
这是一个示例“border-radius: 9999,.

・src/example.js

import { useState } from "react";

const Example = () =&gt; {
  const [isSelected, setIsSelected] = useState(false);

  const clickHandler = () =&gt; setIsSelected((prev) =&gt; !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:>{isSelected &amp;&amp; "Clicked!"}</div>
    &gt;
  );
};

export default Example;

・按下按钮之前。