reactjs - 你如何使用 css 模块在 React 中使用伪类？

Question

我工作的例子如下:

我有一个按钮组件，它接收背景颜色作为 Prop 。收到的颜色将是悬停时按钮必须具有的背景。

第二个问题:在 css 中使用 props 的唯一方法，使用 css 模块，是在声明组件的 js 文件中应用内联样式？

下面我插入一个代码库(在示例中默认应用背景颜色):

import Button from "./Button";

export default function App() {
  return <Button hoverColor={"red"} />;
}

...

export default function Button({ hoverColor }) {
  const buttonStyle = {
    backgroundColor: hoverColor
  };
  return <button style={buttonStyle}>click me!</button>;
}

谢谢

Answer 1

您可以使用 React useState Hook 来实现所需的功能:(您的 Button 组件应如下所示)

import React, { useState } from "react";

export default function Button({ hoverColor }) {
  const [color, setColor] = useState("");

  const buttonStyle = {
    backgroundColor: color
  };
  return (
    <button
      style={buttonStyle}
      onMouseOver={() => setColor(hoverColor)} //set the color when user hovers over the button
      onMouseOut={() => setColor("")} //set color to an empty string otherwise
    >
      click me!
    </button>
  );
}