小编Agu*_*ado的帖子

我正在尝试构建一个 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>
    );
};