Неспособность применить стили к первому дочернему элементу со стилизованными компонентами

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