4

我正在尝试使用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在部分内部重新创建规则。

4

1 回答 1

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的 's。于是，死路一条。

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

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

const Container = styled.div`
  & > *:first-of-type {
    color: red;
  }
`;
于 2020-06-22T12:32:04.183 回答