如何在React中的对象中使用悬停

Question

我定义了一个对象USESTYLE，并在组件secondtest定义的背景颜色中调用它，是否可以在对象USESTYLE中添加悬停

const useStyle = {
  backgroundColor: "red",
  };

function SecondTest() {
  return <div style={useStyle}>SecondTest go down</div>;
}

export default SecondTest;

Answer 1

您可以使用Radium React库

import React from "react";
import Radium from "radium";

const style = {
  color: "#000000",
  ":hover": {
    color: "#ffffff"
  }
};

const MyComponent = () => {
  return <section style={style}>hello world</section>;
};

const MyStyledComponent = Radium(MyComponent);

export default function App() {
  return (
    <>
      <MyStyledComponent />
    </>
  );
}

Answer 2

您可以通过onMouseEnter＆amp; OnMouseLeave如果您想使用JavaScript解决您的问题。更轻松的方法将只是给出一个元素className像

＆lt; section className ='myclass'＆gt; hello world＆lt;/section＆gt;

，然后只是添加所需的所需.CSS文件中的属性，您可以在组件中或全球导入。

.myClass {
  color: #000000;
}

.myClass:hover {
  color: #ffffff;
}

不可能通过在线样式添加悬停。