Question

我正在尝试使用Partials在Emotion中复制一些CSS，但我看不到在使用{{1 }}。有什么办法可以做到这一点？

启动CSS：

:first-of-type

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

partial

PS：尽管Emotion的文档中似乎没有提到li.item { background: white; border: 1px solid; } li.item.isResult:first-of-type { background: pink; /* Don't know how to port this rule */ }，但是它们受支持并且可以正常工作。我特别想知道如何在部分内部重新创建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 } `规则。

Answer 1

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

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

像这样生成CSS：

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

但是，CSS规范仅允许将“类型”用作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;
  }
`;

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

1 个答案: