import styled from "styled-components";

const Styles = styled.div`
  .App {
    &__input {
      width: 200px;
      background-color: orangered;
      &:focus {
        background-color: greenyellow;
      }
    }
    &__button {
      background-color: grey;
    }
    /* this works */
    &__input:focus + .App__button {
      background-color: greenyellow;
    }

    /* this doesn't */
    &__input:focus + &__button {
      background-color: greenyellow;
    }
  }
`;

export default function App() {
  return (
    <Styles>
      <div className="App">
        <input className="App__input" />
        <button className="App__button">click</button>
      </div>
    </Styles>
  );
}

正如您在代码中所看到的，我希望“&”指的是“.app”，因为它在其他地方以及node_sass中都起作用。

这是样式化组件中的一个bug还是我遗漏了什么？下面是复制问题的codesandbox链接：-

https://codesandbox.io/s/jolly-visvesvaraya-ibjd8？file=/src/app.js