我非常喜欢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>
);
};
其他回答
下面是另一个使用CSS变量的选项。这需要一个css悬停定义提前，所以我猜它不是纯粹的内联，但是非常少的代码和灵活。
CSS(设置悬停状态):
.p:hover:{
color:var(--hover-color) !important,
opacity:var(--hover-opacity)
}
反应:
<p style={{'color':'red','--hover-color':'blue','--hover-opacity':0.5}}>
对于styles -components和react-router v4，你可以这样做:
import {NavLink} from 'react-router-dom'
const Link = styled(NavLink)`
background: blue;
&:hover {
color: white;
}
`
...
<Clickable><Link to="/somewhere">somewhere</Link></Clickable>
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()来创建悬停功能。
我找到了一种干净的方法，用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有一个可选的第二个参数用于样式。
在这里试试吧
您可以使用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模块的例子
