Question

我使用样式化组件的时间很少。

此刻，我正在尝试对嵌套元素进行样式覆盖，但无法理解自己在做什么错。

所以我的结构是

--------------------------- Form.js ----------------- ----------

<p></p>

--------------- FieldWrapper.js ----------------- ----------

import { FieldWrapper } from './FieldWrapper';

const Form = styled.form`
    /** my form styles **/
`;

const StyledFieldWrapper = styled(FieldWrapper)`
    /** my FieldWrapper styles **/

    input {
        /** input overrides **/
        padding-bottom: 0.8rem;
        height: 2rem;
        line-height: 2rem;
        box-sizing: content-box;
        background-color: pink !important; // added just for visibility
    }
`;

const MyForm = props => {
    return (
        <>
            <Form>
                <StyledFieldWrapper />
            </Form>
        </>
    );
}

export { MyForm }

现在我希望发生的事情是const Div = styled.div` /** my div styles **/ `; const Label = styled.label` /** my label styles **/ `; const Input = styled.input` /** my input styles **/ `; const FieldWrapper = props => { return ( <Div> <Label> <Input /> </Label> </Div> ); } export { FieldWrapper }中的FieldWrapper.js元素将覆盖StyledFieldWrapper中的样式，但是这种情况不会发生，我也不知道为什么。在过去和这个项目中，我都有类似的替代方法。另外，Form.js不仅包含替代，还具有其自己的样式，我什至看不到它们。

有人有类似的问题吗？

注意：我尝试在Styling Nested Components in Styled-Components中使用该解决方案，但没有成功。

Answer 1

编辑：

由于您希望样式应用于自定义组件，因此还需要将由样式组件生成的className手动分配给该组件的顶级元素。像这样：

const FieldWrapper = props => {
  return (
    <Div className={props.className}>
      <Label>
        <Input />
      </Label>
    </Div>
  );
}

该问题可能与CSS Specicifity有关，这意味着FieldWrapper中定义的原始CSS样式比Form中的样式具有更高的“重要性”。如果检查您的元素，您可能会发现两种样式都已应用，但是前一种样式优先于后者。

一种解决方法是对!important组件中定义的每种输入样式都使用Form规则。另一个方法是向<Input />添加一个类，并将样式定义为myClass.input。基本上可以提高您要应用的规则的特殊性的所有内容。

有关如何执行此操作的更多信息，请参见上面的链接。还要检查Cascade and inheritance：

一旦您了解了源顺序很重要的事实，有时您会遇到这样的情况，即您知道规则在样式表中出现的时间较晚，但是应用了较早的冲突规则。这是因为较早的规则具有更高的特异性-它具有更高的特异性，因此被浏览器选择为应设置元素样式的规则。

正如我们在本课程前面所看到的，类选择器比元素选择器具有更大的权重，因此在类上定义的属性将覆盖直接应用于元素的那些属性。

这里要注意的一点是，尽管我们正在考虑选择器以及应用于选择器的规则，但并不是整个规则都会被覆盖，而只是相同的属性。

选择器具有的特异性程度是使用四个不同的值（或分量）来衡量的，可以将它们视为成千上万个，数百个，十个和一个-四列中的四个个位数：

千：如果声明位于样式属性（也称为内联样式）内，则在此列中得分一。这样的声明没有选择器，因此它们的特异性始终只是1000。

几百：在此列中为整体选择器中包含的每个ID选择器打分。

张力：在此列中为整体选择器中包含的每个类选择器，属性选择器或伪类得分。

一个：在此列中为整体选择器中包含的每个元素选择器或伪元素打一分。

以下是MDN的示例：

/* specificity: 0101 */
#outer a {
    background-color: red;
}

/* specificity: 0201 */
#outer #inner a {
    background-color: blue;
}

使用样式化的组件样式化嵌套的组件

1 个答案: