Question

我正在使用样式化组件，并且希望定位Text的第一个子对象。

const Text = styled.p`
    font-size: 12px;
    & :first-child {
        margin-bottom: 20px;
    }
`;

... component

return(
   <div>
      <p>I am just regular text</p>
      <p>Me too</p>
      <Text>Hello Joe</Text> // this should have the margin bottom
      <Text>Goodbye</Text >
   </div>
)

Answer 1

最后，我明白了你的问题。样式化的组件与前两个本机p标记混淆（从我的角度来看），这就是未应用CSS的原因。

我将使用以下解决方法：

const Text = styled.p`
    font-size: 12px;
    color: blue;
    &:nth-child(3) {
        margin-bottom: 20px;
        color: red !important;
    }
`;

这样做，您将为CSS选择第三个孩子（包括前两个p标签）

或者，您可以执行以下操作：为标签添加类名称，并为该类提供CSS。

const Text = styled.p`
  font-size: 12px;
  color: blue;
  &.colors {
    margin-bottom: 20px;
    color: red !important;
  }
`;

 <div>
    <p>I am just regular text</p>
    <p>Me too</p>
    <Text className="colors">Hello Joe</Text>
    <Text>Goodbye</Text>
</div>

这里是demo

希望它会有所帮助：）

Answer 2

&和:first-child之间不应有空格

&:first-child {
    margin-bottom: 20px;
}

Answer 3

像这样使用

<record id="group_faculty_student" model="res.groups">
    <field name="name">Student</field>
    <field name="category_id" ref="module_category_faculty"/>
    <field name="implied_ids" eval="[(4, ref('base.group_user'))]"/>
</record>
    
<record id="group_faculty_professor" model="res.groups">
    <field name="name">Professor</field>
    <field name="category_id" ref="module_category_faculty"/>
    <field name="implied_ids" eval="[(4, ref('group_faculty_student'))]"/>
</record>
    
<record id="group_faculty_admin" model="res.groups">
    <field name="name">Administrator</field>
    <field name="category_id" ref="module_category_faculty"/>
    <field name="implied_ids" eval="[(4, ref('group_faculty_professor'))]"/>
    <field name="users" eval="[(4, ref('base.user_root')), (4, ref('base.user_admin'))]"/>
</record>

Answer 4

最好在某些样式化的组件上使用：last-of-type，而不要使用：nth-child，这样效果很好

export default styled.div`
    :last-of-type {
        background: red;
    }`

const Text = styled.p`
    font-size: 12px;
    color: blue;
    &:nth-child(3) {
        margin-bottom: 20px;
        color: red !important;
    }
`;

目标第一个孩子css样式的组件

4 个答案: