在已设置样式的组件中子组件的输入焦点上设置父组件的样式

Question

我已经看到了一些解决这个问题的繁重解决方案，在React中使用ref或事件处理程序。我想知道样式化组件中是否有解决方案。

下面的代码显然不正确。当输入子组件具有焦点时，我正在尝试找出设置父组件样式的最简单方法。这是否可以使用样式化组件？

实现这一点的最佳方法是什么，特别是考虑到样式化组件，即使这意味着依赖上面提到的React方法之一？

const Parent = () => (
  <ParentDiv>
    <Input/>
  </ParentDiv>
);


const ParentDiv = styled.div`
  background: '#FFFFFF';

  ${Input}:focus & {
    background: '#444444';
  }
`;

const Input = styled.input`
  color: #2760BC;

  &:focus{
    color: '#000000';
  }
`;

Answer 1

@hoodsy谢谢，它就像我在父div上使用的一个符咒，当输入聚焦时，它可以改变标签的颜色。

     &:focus-within label{
      color: blue;
  }

Answer 2

//更新2018：

如果您不需要Edge或IE支持，您可以使用：focus in（感谢您了解@hoodsy）

div:focus-within {
  background: #444;
}

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

Answer 3

签出：在内聚焦！我想这正是你想要的。

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-内