如何在 JSX 中做 CSS :hover 功能？

Question

您好，感谢您在这里所做的出色工作。我正在为我的项目使用 react.js 来构建我的组件，我现在感觉有点卡在我的项目中。我正在尝试使用悬停功能设置按钮的样式，但我不知道如何应用它来做出反应。

代码如下：

let button = {
    backgroundColor: colorPalette.white,
    border: "1px solid rgb(12,106,145)",
    color: colorPalette.brandCol1,
    textAlign: 'center',
    textDecoration: 'none',
    fontSize : 'inherit',
    fontWeight : 600,
    padding : "5px 8px 5px 8px"
}

我想给它添加一个悬停样式，就像我们在 css 中做的那样

button:hover {
style here.......
}

什么是正确的语法？

Answer 1

你可以使用

    const ColorButton = withStyles((theme) => ({
    root: {
        //color: theme.palette.getContrastText("#26A69A"),
        borderColor: '#26A69A',
        color: '#26A69A',
        
        borderWidth: 1,
        borderStyle: 'solid',
        fontSize: 30,
        boxShadow:2,
        backgroundColor: "white",
        '&:hover': {
            backgroundColor: "white",
            color: 'white',
        },
        '&:disabled': {
            backgroundColor: "#A7A9AC",
        },
    },
}))(ButtonBase);

Answer 2

你可以使用：

    const styles = {
    myStyleClassName: {
            padding: '16px 0px 16px 0px',
            '& a': {
                textDecoration: 'none',
                color: '#0000ee',
            },
            '& a:hover': {
            textDecoration: 'underline',
        },
    },
    myButtonClass: {
        '&:hover': {
             textDecoration: 'underline',
        },       
    },
};

....

render() {
    <span className={myStyleClassName}><a tag><button><someDomObjct></span>
    <button className={myButtonClass}>my label</button>
}

见：http://cssinjs.org/jss-nested/?v=v6.0.1 repo 并不是所有东西都需要的，上面的内容应该是开箱即用的。

Answer 3

使用 react 来管理悬停动画的状态太过分了。您不需要使用 javascript 来进行简单的 CSS 悬停...您在浏览器中，使用正确的工具来完成正确的工作，对吗？

所以在这里我将展示几种不同的方法来实现相同的目标：

在我的组件中，我导入了 glamor 和我的样式文件：

import { style } from 'glamor';
import styles from '../styles';

在我的样式文件中，我有这样的东西：

import { style } from 'glamor';

const styles = {
redHoverbutton: style({
  backgroundColor: "#aaaaaa",
  fontSize: "1.1rem",
  transition: "all ease .5s",
  ":hover": {
    backgroundColor: "#ff0000",
    color: "#ffffff"
  }
})
};

export default styles;

这使得悬停功能可以通过 css 工作，如下所示：

<div {...styles.redHoverbutton}></div>

这是一个 css 驱动的悬停效果（如果你注意到了，就会有过渡效果），但这不是内联 css。尽管如此，您的样式可以在同一个文件中制作，如下所示：

let theStyle = style({ backgroundColor: "#aaaaaa",transition: "all ease .5s", ":hover": { cursor: "pointer", backgroundColor: "#ffff9b", color: "#fd0808" } });

return (<div {...theStyle}>Hover me!</div>);

现在，如何将样式和扩展运算符放在同一行和 JSX 元素内部？

<div {...style({ backgroundColor: "#aaaaaa", height: "30px", width: "100%", padding: "6px", fontsize: "16px", transition: "all ease .5s", ":hover": { cursor: "pointer", backgroundColor: "#ffff9b", color: "#fd0808" } })}>Hover Me!</div>

它可能并不完美，但它工作得很好，并且以类似的方式完成了与真正的内联样式相同的事情。

Answer 4

可以使用onMouseEnteronMouseLeave来调整组件的状态

<button
  onMouseEnter={() => setButtonHovered(true)} 
  onMouseLeave={() => setButtonHovered(false)}
  className={buttonIsHovered ? 'hover' : null}
/>

查看here了解更多信息

还是只使用css 类？

import './style.css'

<button className="Button"/>

.Button:hover {
  ...
}