我非常喜欢React中的内联CSS模式,并决定使用它。

但是,你不能使用:hover和类似的选择器。那么,在使用内联CSS样式时实现高亮悬停的最佳方法是什么呢?

#reactjs的一个建议是有一个Clickable组件,并像这样使用它:

<Clickable>
    <Link />
</Clickable>

Clickable有一个悬停状态,并将其作为道具传递给链接。然而,Clickable(我实现它的方式)将链接包装在一个div中,以便它可以设置onMouseEnter和onMouseLeave。这让事情变得有点复杂(例如,在div中包装的span与span的行为不同)。

有没有更简单的方法?


当前回答

直接在组件中使用标签,如下所示:

<Wrapper>
  <style>
   .custom-class{
       // CSS here
   }
   .custom-class:hover{
     //query selector
   }
  </style>
  <div className="custom-class"></div>
</Wrapper> 

其他回答

你可以创建一个抽象的悬停类,例如颜色。

.hoverClassColor:hover {
  color:var(--hover-color) !important;
}

然后在悬停时将所有元素的颜色更改为红色:

render() {
  return <a className={'hoverClassColor'} style={{'--hover-color':'red'}}>Test</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

我使用这个技巧,混合了内联风格和css:

//inline-style:
const button = {
  fontSize: "2em",
};
return (
  <div style={button} data-hover="button">
    <style>{`[data-hover="button"]:hover {
        font-size: 2.1em !important;
    }`}</style>
    {this.props.text}
  </div>
);

你可以使用镭——它是一个开源工具,可以在ReactJS中使用内联样式。它恰好添加了您需要的选择器。非常受欢迎,看看npm上的镭

这可以是一个很好的hack内联样式在一个react组件(也使用:hover CSS函数):

...

<style>
  {`.galleryThumbnail.selected:hover{outline:2px solid #00c6af}`}
</style>

...