与Sass选择器不能与样式化组件中的同级选择器一起工作

Question

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

Answer 1

问题就在这里：

因为父选择器可以被像h1这样的类型选择器替换，所以它只允许在复合选择器的开头使用类型选择器...

它还说：

它还可以用于在特定上下文中设置外部选择器的样式...

在你的情况下，这似乎不是一个合适的“上下文”。

请参阅SASS父选择器文档。这里。