javascript - 在样式组件中为子组件的输入焦点设置父组件的样式

Question

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

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

解决这个问题的最佳方法是什么，特别是考虑到样式组件，即使这意味着依赖上面提到的 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

查看:focus-within !我认为这正是您正在寻找的。

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