仅在未聚焦的子项时才更改悬停时父项的样式 - 样式化组件

Question

我有一个div组件：

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

和输入的孩子

const Input = styled.input``;

正如你所看到的，如果border-color专注，我不想在Parent上更改Input。然而，大气的:hover根本不起作用。寻求帮助，谢谢！

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>
  )
}