Question

所以我要遍历一个也嵌套的集合：

  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。似乎没有任何作用。而且样式没有在其他任何地方得到应用...可以提供任何帮助。谢谢。

Answer 1

如果我没看错的话，您可能需要将样式添加到DepartmentContainer的父项上，才能使CSS应用于DepartmentContainer

无法将样式应用于具有样式组件的第一个孩子

1 个答案: