css - 如何在 React 中为伪类动态添加 css 样式

Question

我正在尝试构建一个 React 组件，该组件显示存储在数据库中的多个图像，其中每个缩略图下方都有一个链接到其专用页面的按钮。现在，我希望每个按钮在悬停时显示图像的主色作为背景。我已经将颜色存储在数据库( artwork.palette.DOMINANT )中，但是很难将十六进制代码传递给 React 组件。
问题是，内联样式无法设置伪选择器的属性，例如 a:hover ，并且因为颜色是使用 artwork 动态获取的对象，我不能在全局和静态 css 中设置它。有没有办法在 React 中设置组件范围的样式？大概喜欢 <style scoped>...</style> .
这是我的代码，为了简单起见，我只保留了它的要点。

const ImageBox = ({ artwork }) => {
    return (
        <Fragment>
            <div className="image">
                <img src={artwork.resources.THUMBNAIL} alt={artwork.title} />
            </div>
            <div className="caption">
                <span>By {artwork.artist}.</span>
            </div>
            <div className="button">
                <a href="!#" style={{ color: artwork.palette.DOMINANT }}>
                    Details
                </a>
            </div>
        </Fragment>
    );
};

Answer 1

您可以使用 JS 来修改 CSS 的全局属性。

在 index.css 中声明属性或 App.css并添加将利用这些变量的基本样式。

:root {
  --color-surface: white;
}

button {
  background: var(--color-surface);
}

使用 JS( onMouseEnter 和 onMouseLeave )修改这些属性。即

//onMouseEnter
document.documentElement.style.setProperty("--color-surface", "black");

//onMouseLeave
document.documentElement.style.setProperty("--color-surface", "white")

您可以遵循一些引用资料:
Blog和 CodSandBox
注意:不确定这是否是一个好习惯(我在我从事的元素中没有见过)，我建议使用 CSS-in-JS或图书馆，如 styled component .