时间戳

首页 > 解决方案 > 无法使用样式组件将样式应用于第一个孩子

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

问题描述

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

  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>

在我的样式组件中，我试图将 a应用于除第一个之外的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. 似乎没有任何效果。并且这些样式没有在其他任何地方得到应用......任何帮助表示赞赏。谢谢你。

标签： javascriptcssreactjsstyled-components

解决方案

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

推荐阅读