我非常喜欢React中的内联CSS模式，并决定使用它。
但是，你不能使用:hover和类似的选择器。那么，在使用内联CSS样式时实现高亮悬停的最佳方法是什么呢?
#reactjs的一个建议是有一个Clickable组件，并像这样使用它:
<Clickable>
<Link />
</Clickable>
Clickable有一个悬停状态，并将其作为道具传递给链接。然而，Clickable(我实现它的方式)将链接包装在一个div中，以便它可以设置onMouseEnter和onMouseLeave。这让事情变得有点复杂(例如，在div中包装的span与span的行为不同)。
有没有更简单的方法?
当前回答
我找到了一种干净的方法，用useState的包装器来做到这一点，我称之为useHover。 不需要额外的库/框架。
const App = () => {
const hover = useHover({backgroundColor: "LightBlue"})
return <p {...hover}>Hover me!</p>
}
包装器的代码:
function useHover(styleOnHover: CSSProperties, styleOnNotHover: CSSProperties = {})
{
const [style, setStyle] = React.useState(styleOnNotHover);
const onMouseEnter = () => setStyle(styleOnHover)
const onMouseLeave = () => setStyle(styleOnNotHover)
return {style, onMouseEnter, onMouseLeave}
}
注意，当组件未悬停时，useHover有一个可选的第二个参数用于样式。
在这里试试吧
其他回答
这个解决方案确实使用了样式表。然而，如果你的应用程序使用了index.css——也就是说，它有一个样式表被导入到你的顶级组件中，你可以只在那里写下面的代码
.hoverEffect:hover {
//add some hover styles
}
然后在React组件中，添加类名“hoverEffect”来应用“内联”的悬停效果。
如果悬停状态是作为道具传递的，而你只想将它应用到子组件上，那么在index.css中删除:hover，并执行此操作。
function Link(props) {
return (
<a className={props.isHovered ? "hoverEffect" : ""}>Hover me<a/>
)
}
我也有同样的情况。非常喜欢在组件中保持样式的模式，但悬停状态似乎是最后一个障碍。
我所做的是写一个mixin，你可以添加到你的组件，需要悬停状态。 这个mixin将为组件的状态添加一个新的悬停属性。如果用户将鼠标悬停在组件的主DOM节点上，它将被设置为true;如果用户离开元素，它将被设置为false。
现在在你的组件渲染函数中，你可以这样做:
<button style={m(
this.styles.container,
this.state.hovered && this.styles.hover,
)}>{this.props.children}</button>
现在，每当悬浮状态的状态发生变化时，组件将重新呈现。
我还为此创建了一个沙盒回购，我自己用它来测试这些模式中的一些。如果您想查看我的实现示例，请查看它。
https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin
你可以使用镭——它是一个开源工具，可以在ReactJS中使用内联样式。它恰好添加了您需要的选择器。非常受欢迎，看看npm上的镭
直接在组件中使用标签，如下所示:
<Wrapper>
<style>
.custom-class{
// CSS here
}
.custom-class:hover{
//query selector
}
</style>
<div className="custom-class"></div>
</Wrapper>
onMouseEnter={(e) => {
e.target.style.backgroundColor = '#e13570';
e.target.style.border = '2px solid rgb(31, 0, 69)';
e.target.style.boxShadow = '-2px 0px 7px 2px #e13570';
}}
onMouseLeave={(e) => {
e.target.style.backgroundColor = 'rgb(31, 0, 69)';
e.target.style.border = '2px solid #593676';
e.target.style.boxShadow = '-2px 0px 7px 2px #e13570';
}}
在样式或类中设置默认属性，然后调用onMouseLeave()和onMouseEnter()来创建悬停功能。
