使用样式组件设计嵌套组件的样式

Question

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

目前，我正试图对嵌套元素执行样式覆盖，并且我很难理解自己做错了什么。

所以我的结构是。

---------------------------Form.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 }

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

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中的样式将被Form.js中的StyledFieldWrapper元素所覆盖，但是这不会发生，我也不知道为什么。我在过去和这个项目中都有这样的越权。另外，StyledFieldWrapper不只是包含重写，它还有自己的样式，我甚至看不到它们。

有没有人遇到过类似的问题？

注意:我尝试在样式化中嵌套组件的样式.组件中使用该解决方案，但没有成功。

Answer 1

编辑：

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

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

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

解决这一问题的一种方法是对在您的!important组件中定义的每个输入样式使用Form规则。另一个方法是向<Input />中添加一个类，并将您的样式定义为myClass.input。基本上，任何能增加你想要应用的规则的严格性的东西。

有关如何做到这一点的更多信息，请参见上述链接。还可以查看级联和继承

一旦您理解了源顺序很重要这一事实，在某一时刻，您将遇到这样一种情况:您知道规则会在样式表中稍后出现，但是会应用更早的、相互冲突的规则。这是因为早期的规则具有更高的特异性--它更具体，因此浏览器选择它作为元素的样式。 正如我们在本课前面所看到的，类选择器比元素选择器具有更大的权重，因此类上定义的属性将覆盖直接应用于元素的属性。 这里要注意的是，虽然我们在考虑选择器，以及应用于它们所选择的事物的规则，但覆盖的并不是整个规则，只有相同的属性。

选择器使用四个不同的值(或成分)来度量其特异性，这些值可被认为是数千、数百、数十和1--四列中的四个个位数：

1. 数千：如果声明位于style属性(也称为内联样式)内，则在本列中得分1。这样的声明没有选择器，所以它们的特异性总是很简单的1000。
2. 数百个：在这个列中为包含在整个选择器中的每个ID选择器打分。
3. Tens：对于包含在整个选择器中的每个类选择器、属性选择器或伪类，在这一列中得分一。
4. one ：在该列中，对于包含在整个选择器中的每个元素选择器或伪元素，得分为1。

以下是MDN的一个示例：

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

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