javascript - 如何使用 :first-of-type rule inside a styled-components/emotion partial?

Question

我正在尝试使用 Partials 在 Emotion 中复制一些 CSS，但我不知道在我使用 :first-of-type 的情况下如何复制像 partial 这样的规则。有什么方法可以实现这一目标吗？

启动 CSS:

li.item {
  background: white;
  border: 1px solid;
}

li.item.isResult:first-of-type {
  background: pink; /* Don't know how to port this rule */
}

将此规则移植到 Emotion 的最佳尝试:

import styled from '@emotion/styled';
import { css } from '@emotion/core';

const Item = styled.li`
  background: white;
  border: 1px solid;
  ${resultPartial}
`

const resultPartial = props => props.isResult && css`
  &:first-of-type {
    background: pink; // Has no effect
  }
`

PS:虽然 partial s 在 Emotion 的文档中似乎没有提到，但它们是受支持的并且可以工作。我特别想知道如何在部分中重新创建 :first-of-type 规则。

Answer 1

不是解决方案，而是解释为什么它不起作用。

const Div = styled.div`
  color: black;
  &:first-of-type {
    color: red;
  }
`;

像这样生成 CSS:

.HaSh{color: black}
.HaSh:first-of-type{color: red}

但是，CSS 规范只允许“type”作为 first/nth/last/only-of-type 的标签名称。然而， styled-components 依赖并且必须依赖类名来区分不同样式的 div 。于是，死路一条。
我相信您可以通过在任何“ parent 的 child ”上设置样式来解决限制(通常)，例如:

const Comp = () => <Container><p>1</p><p>2</p></Container>;

const Container = styled.div`
  & > *:first-of-type {
    color: red;
  }
`;