Менять стили родительского элемента при наведении, только если дочерние элементы не сфокусированы - стилизованные компоненты

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