如何在样式组件/情感部分中使用 :first-of-type 规则？

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：虽然partialEmotion 的文档中似乎没有提到 s，但它们是受支持的并且可以工作。我特别想知道如何: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。于是，死路一条。

我相信您可以通过在任何“父母的孩子”上设置样式来解决该限制（一般来说），例如：

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

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