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

Posted 2023-02-22

【中文标题】如何在 JSX 中做 CSS :hover 功能？

【英文标题】：How to do CSS :hover function in JSX ?

【发布时间】：2017-11-25 01:39:02

【问题描述】：

您好，感谢您在这里所做的出色工作。我正在为我的项目使用 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.......

什么是正确的语法？

【问题讨论】：

在 javascript 中使用 React 和事件处理程序...

能否提供实际的 React 代码？

【参考方案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);

【讨论】：

至少指定对于这个解决方案，您需要一些框架，例如 material-ui。

@Markus 感谢您的评论是的，我在材质 ui 中使用了这个。

【参考方案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 并不是所有东西都需要的，上面的内容应该是开箱即用的。

【讨论】：

这将如何工作？首先应该是<span className=styles.myStyleClassName...？而且，真的是应该设置的 className 吗？不应该是 style 属性吗？

我看不出没有 jss 是如何工作的。我得到 Object is not assignable to type 'string'。

【参考方案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>

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

【讨论】：

非常有用的图书馆：D 魅力真棒！

【参考方案4】：

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

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

查看here了解更多信息

还是只使用css 类？

import './style.css'

<button className="Button"/>

.Button:hover 
  ...

【讨论】：

您可能需要添加更多内容，以便为初学者提供有关如何实现上述内容的指导。例如，定义 setButtonHovered(bool) 以及如何/在何处放置 hover 类定义的 CSS