使用 styled-components 的兄弟组件样式

Question

这是一个非常简单的案例，出于某种原因我无法开始工作。我有一个 styled-components 容器，我想在该容器内定义 p 的样式，如下所示：

const Container = styled.div`
  & p {
    margin: 0;
    & + & {
      margin-top: 10px;
    }
  }
`

因此，我希望每当 Container 中的 p 上有更多内容时，第二个 p 会得到 top-margin，但这不会发生了。

这里是 codesandbox。

有什么想法吗？

Answer 1

我只是把条件倒过来了。这是你想要的吗？

CodeSandbox

import styled from "styled-components";

const Container = styled.div`
  background: grey;
  & p:nth-child(1) {
    margin: 0px;
  }
  & p {
    margin-top: 10px;
  }
`;

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Container>
        <p>Line One</p>
        <p>Line Two</p>
        <p>Line Two</p>
      </Container>
    </div>
  );
}

使用 styled-components 的兄弟组件样式

Sibling component styling with styled-components

styled-components