我非常喜欢React中的内联CSS模式，并决定使用它。
但是，你不能使用:hover和类似的选择器。那么，在使用内联CSS样式时实现高亮悬停的最佳方法是什么呢?
#reactjs的一个建议是有一个Clickable组件，并像这样使用它:
<Clickable>
<Link />
</Clickable>
Clickable有一个悬停状态，并将其作为道具传递给链接。然而，Clickable(我实现它的方式)将链接包装在一个div中，以便它可以设置onMouseEnter和onMouseLeave。这让事情变得有点复杂(例如，在div中包装的span与span的行为不同)。
有没有更简单的方法?
当前回答
您可以使用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模块的例子
其他回答
直接在组件中使用标签，如下所示:
<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()来创建悬停功能。
我在我最近的一个应用程序中使用了一个相当hack的解决方案，它符合我的目的，我发现它比在香草js中编写自定义悬停设置函数更快(尽管，我承认，在大多数环境中可能不是最佳实践..)所以，如果你还感兴趣，我告诉你。
我创建了一个父元素，只是为了保存内联javascript样式，然后是一个带有className或id的子元素，我的css样式表将锁定并在我的专用css文件中写入悬浮样式。这是因为更细粒度的子元素通过继承接收内联js样式，但其悬停样式被css文件覆盖。
基本上，我的css文件存在的唯一目的就是保存悬停效果，没有别的。这使得它非常简洁，易于管理，并允许我在我的内联React组件样式中做繁重的工作。
这里有一个例子:
const styles = { container: { height: '3em', backgroundColor: 'white', display: 'flex', flexDirection: 'row', alignItems: 'stretch', justifyContent: 'flex-start', borderBottom: '1px solid gainsboro', }, parent: { display: 'flex', flex: 1, flexDirection: 'row', alignItems: 'stretch', justifyContent: 'flex-start', color: 'darkgrey', }, child: { width: '6em', textAlign: 'center', verticalAlign: 'middle', lineHeight: '3em', }, }; var NavBar = (props) => { const menuOptions = ['home', 'blog', 'projects', 'about']; return ( <div style={styles.container}> <div style={styles.parent}> {menuOptions.map((page) => <div className={'navBarOption'} style={styles.child} key={page}>{page}</div> )} </div> </div> ); }; ReactDOM.render( <NavBar/>, document.getElementById('app') ); .navBarOption:hover { color: black; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>
注意，“child”内联样式没有“color”属性集。如果是这样，这将不起作用，因为内联样式将优先于样式表。
我做了类似的事情，但我没有使用material-ui或makestyle。我在样式对象的css中添加了悬停作为条件:
const styles = {
hoverStyle: {
color: 'grey',
'&:hover': { color: 'blue !important' },
}
};
var NavBar = (props) => {
const menuOptions = ['home', 'blog', 'projects', 'about'];
return (
<div>
<div>
{menuOptions.map((page) => <div style={styles.hoverStyle} key={page}>{page}</div> )}
</div>
</div>
);
};
这对我很管用。
下面是我使用React Hooks的解决方案。它结合了展开运算符和三元运算符。
style.js
export default {
normal:{
background: 'purple',
color: '#ffffff'
},
hover: {
background: 'red'
}
}
Button.js
import React, {useState} from 'react';
import style from './style.js'
function Button(){
const [hover, setHover] = useState(false);
return(
<button
onMouseEnter={()=>{
setHover(true);
}}
onMouseLeave={()=>{
setHover(false);
}}
style={{
...style.normal,
...(hover ? style.hover : null)
}}>
MyButtonText
</button>
)
}
