Question

我有一个div组件：

const Parent = styled.div`
   &:not(${Input}:focus):hover {
     border-color: blue;
   }
`;

和输入的孩子

const Input = styled.input``;

如您所见，如果border-color被聚焦，我不想在Parent上更改Input。但是:hover的atm根本不起作用。寻找帮助，谢谢！

Answer 1

您可以利用:focus-within来做到这一点。

div {
  padding: 1em;
  margin: 2em;
  display: inline-block;
  border-width: 3px;
  border-style: solid;
}

div:hover {
  border-color: red;
}

div,
div:focus-within,
div:focus-within:hover {
  border: 3px solid blue;
}

<div>
  <input type="text">
</div>

Answer 2

我不知道如何仅使用选择器css来处理它，但是可以使用javascript来欺骗它。

您的样式组件：

const Input = styled.input``

const Parent = styled.div`
  border: 1px solid blue;
  :hover {
    border-color: ${p => p.inputFocus ? "blue" : "yellow"};
  }
`

，然后在渲染中可以处理输入的状态焦点。

渲染：

state = {
    inputFocus: false
}

setFocus = () => this.setState({inputFocus: true})
unsetFocus = () => this.setState({inputFocus: false})

render() {
  const { inputFocus } = this.state
  return (
      <Container inputFocus={inputFocus}>   
        <Input 
          onBlur={this.unsetFocus}
          onFocus={this.setFocus}
        />
      </Container>
  )
}

仅当子项不集中时，才更改父项的悬停样式-样式化的组件

2 个答案: