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

【问题标题】：Sibling component styling with styled-components使用 styled-components 的兄弟组件样式
【发布时间】：2022-01-12 18:41:03
【问题描述】：

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

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

因此，我希望只要Container 内的p 上有更多内容，第二个p 就会得到top-margin，但这不会发生。

这是codesandbox。

有什么想法吗？

【问题讨论】：

我认为codesandbox中的例子是错误的还是缺失的？能不能更新一下，让我看看
感谢您的关注，我想我没有先保存就分享了它... :) 现在应该可以了。
你能用 CSS 写下你想要实现的目标吗？我不确定我是否理解正确。然后我可以帮你把它“转换”成样式化的组件。
真的很简单。我希望Container 中的p 元素具有margin: 0。但是如果有多个 p 元素，我希望从第 2 个到最后一个元素都有一个 top-margin: 10px 以便段落之间有空格。

标签： styled-components

【解决方案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>
  );
}

【讨论】：

嘿，谢谢！这几乎是我想要的，所以我做了一个小小的修改——最终结果是& p { margin: 0; &:not(:first-child) { margin-top: 10px; } }。所以，即使我仍然很好奇为什么我的原始代码不起作用（也许有人仍然会加入），我会接受你的回答。再次感谢！