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

百变鹏仔 4天前 #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;

・按下按钮之前。

・按下按钮后。

文章推荐

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

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？