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

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《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》文章吧，也可关注golang学习网公众号了解相关技术文章。