无法使用样式组件将样式应用于第一个孩子答案

【问题标题】：Not being able to apply styles to first child with styled components无法使用样式组件将样式应用于第一个孩子
【发布时间】：2018-10-20 07:53:50
【问题描述】：

所以我正在迭代一个也嵌套的集合：

  departments.map(({ departmentName, listings }: Department) =>
    <DepartmentContainer key={departmentName}>
      <DepartmentName>{departmentName}</DepartmentName>
      <JobsContainer>
        {listings.map(({ title, id, location }: Job) =>
          <Card
            key={id}
            id={id}
            title={title}
            location={location}
            onClick={(e: React.SyntheticEvent<MouseEvent>) => {
              e.preventDefault();
              history.push(`/company/careers/${id}`);
              handleOpen();
            }}
          />,
        )}
      </JobsContainer>
    </DepartmentContainer>

在我的样式组件中，我尝试将border-top 应用于每个DepartmentContainer 除了第一个：

const DepartmentContainer = styled.div`
  &:not(:first-child) {
    border-top: 1px solid ${borderGray};
  };
`;

我尝试过类似的方法：

border-top: 1px solid ${borderGray};
  &:first-child {
    border-top: none;
    border-top-color: transparent;
  }

以及first-of-type。似乎没有任何效果。而且这些样式没有在其他任何地方得到应用......任何帮助表示赞赏。谢谢。

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

如果我没看错，您可能需要将样式添加到 DepartmentContainer 的父级上，以便让您的 css 应用于 DepartmentContainer

【讨论】：