我非常喜欢React中的内联CSS模式，并决定使用它。
但是，你不能使用:hover和类似的选择器。那么，在使用内联CSS样式时实现高亮悬停的最佳方法是什么呢?
#reactjs的一个建议是有一个Clickable组件，并像这样使用它:
<Clickable>
<Link />
</Clickable>
Clickable有一个悬停状态，并将其作为道具传递给链接。然而，Clickable(我实现它的方式)将链接包装在一个div中，以便它可以设置onMouseEnter和onMouseLeave。这让事情变得有点复杂(例如，在div中包装的span与span的行为不同)。
有没有更简单的方法?
当前回答
使用钩子:
const useFade = () => {
const [ fade, setFade ] = useState(false);
const onMouseEnter = () => {
setFade(true);
};
const onMouseLeave = () => {
setFade(false);
};
const fadeStyle = !fade ? {
opacity: 1, transition: 'all .2s ease-in-out',
} : {
opacity: .5, transition: 'all .2s ease-in-out',
};
return { fadeStyle, onMouseEnter, onMouseLeave };
};
const ListItem = ({ style }) => {
const { fadeStyle, ...fadeProps } = useFade();
return (
<Paper
style={{...fadeStyle, ...style}}
{...fadeProps}
>
{...}
</Paper>
);
};
其他回答
我也有同样的情况。非常喜欢在组件中保持样式的模式，但悬停状态似乎是最后一个障碍。
我所做的是写一个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
最简单的方式:2022年: useRef +内联onMouseOver/onMouseOut
例子:
var bottomAtag = useRef(null)
.．.然后在里面返回(
<a ref={bottomAtag} onMouseOver={() => bottomAtag.current.style.color='#0F0'} ...></a>
您可以使用css模块作为替代方案，另外还可以使用react-css-modules进行类名映射。
这样你就可以像下面这样导入你的样式，并在你的组件中使用正常的css范围:
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';
class Table extends React.Component {
render () {
return <div styleName='table'>
<div styleName='row'>
<div styleName='cell'>A0</div>
<div styleName='cell'>B0</div>
</div>
</div>;
}
}
export default CSSModules(Table, styles);
下面是一个webpack css模块的例子
在某种程度上是因为这个原因(其他原因是与其他库/语法的实现不一致，内联样式缺乏对前缀属性值的支持)。相信我们应该能够简单地用JavaScript编写CSS，并拥有完全自包含的组件HTML-CSS-JS。使用ES5 / ES6模板字符串，我们现在可以，而且它也可以很漂亮!：）
NPM install style-it -save
函数语法(JSFIDDLE)
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return Style.it(`
.intro:hover {
color: red;
}
`,
<p className="intro">CSS-in-JS made simple -- just Style It.</p>
);
}
}
export default Intro;
JSX Syntax (j挑战者)
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return (
<Style>
{`
.intro:hover {
color: red;
}
`}
<p className="intro">CSS-in-JS made simple -- just Style It.</p>
</Style>
);
}
}
export default Intro;
onMouseOver和onMouseLeave with setState起初似乎对我来说有点开销-但这就是react的工作方式，对我来说这似乎是最简单和最干净的解决方案。
例如，呈现一个主题CSS服务器端也是一个很好的解决方案，可以使react组件更干净。
如果你不需要将动态样式附加到元素(例如主题)，你就不应该使用内联样式，而应该使用CSS类。
这是一个传统的html/css规则，以保持html/ JSX干净简单。
