PHP前端开发

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

百变鹏仔 2个月前 (10-13) #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;

・按下按钮之前。

・按下按钮后。