【问题标题】:Highlight in a row when the mouse is over a row in material-table当鼠标在材料表中的一行上时突出显示一行
【发布时间】:2019-04-19 14:05:41
【问题描述】:

当鼠标悬停在一行上时,我必须使用哪个组件来获得一行中的高亮,使用材料表组件?

我很难找到任何属性或哪个组件覆盖来获得它。

提前感谢您的宝贵时间 最好的问候

这里是代码https://codesandbox.io/s/yv13zjr9w9

【问题讨论】:

    标签: reactjs material-table


    【解决方案1】:

    你可以创建一个 CSS 来突出显示行

    tr:hover{
    background:gray;
    }
    

    参考沙盒

    https://codesandbox.io/s/y686o6n9

    【讨论】:

      【解决方案2】:

      如果您只希望此表格具有悬停效果,请将其包装在另一个元素中或给它一个类,如上例所示:

      https://codesandbox.io/s/4wkpp98z69

      .myTable tr:hover {
        background-color: red;
      }
      

      【讨论】:

      • 您的代码和书没有您的解决方案,但我理解您的解释并做到了。如果该行被点击,使用您的逻辑改变颜色的解决方案是什么?
      • 抱歉,我忘记在剪贴板中复制分叉链接 :)
      • 如果被点击的话会改变行的不同颜色?
      • 你可以使用 :active 选择器
      猜你喜欢
      • 1970-01-01
      • 2018-01-07
      • 2017-07-17
      • 2021-04-25
      • 1970-01-01
      • 1970-01-01
      • 2018-05-19
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多