Question

我在<div>中有一个锚点，该锚点的背景使用了条件样式，这似乎可以使a:hover样式被丢弃。实际上，我是否有条件的颜色还是固定的颜色都没关系，如果我从component.js删除了背景样式，那么style.css的悬停效果就会发挥作用。

我的问题是如何在仍具有条件背景色的同时如何实现悬停效果？

component.js：

<div>
  <a href="#"
     style={{
       background: (day === 2) && "#f1f1f1"
     }} />
</div>

style.css：

div a {
  display: block;
}
div a:hover {
  background: blue;
}

Answer 1

对于CSS样式表和内联样式，这是一个很好的用例，由于css specificity，内联样式会被覆盖。

在其上弹出一个类，然后做类似的事情。

.conditional {
  background-color: #f1f1f1;
}

.conditional:hover {
  background-color: red;
}

Answer 2

只需添加一下，看看样式化的组件https://www.styled-components.com/。这是一个偏好问题，但是使用样式对象可能会有点限制并且难以阅读（IMHO），有些人会说很难阅读样式化的组件-您的选择样式化组件还有很多其他内容，因此绝对值得一看。您的用例如下所示（或者您可以将样式化的组件放在其他模块中）

import React from 'react'
import styled from 'styled-components'

const Link = styled.a`
  display: block;

  & :hover {
    background: ${props => props.dayValue === 2 ? white : blue};
  }
`

render(){
  return (<div> <Link href='' dayValue={this.props.dayValue}/></div>)
}

Answer 3

一种解决方案是使用!important来强制:hover的行为，即使应用了内联样式时也是如此，例如：

div a:hover {
  background: blue !important;
}

如果不需要动态的内联样式（即，您不需要动态的背景颜色），则通常需要避免使用!important来支持基于class的样式：

JSX

<div>
  <a href="#" className={ (day === 2) && "dayTwoClass" } />
</div>

CSS

div a {
  display: block;
}

// Increased specificity of div to a causes blue background on hover
div a:hover {
  background: blue;
}

// Lesser specificity causes f1f1f1 background when not hovered
.dayTwoClass {
  background: #f1f1f1;
}

条件样式，悬停和ReactJS

3 个答案: