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

Question

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

目前，我正试图对一个嵌套元素进行样式覆盖，但我不明白自己做错了什么。

所以我的思路是

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然而，这不会发生，我不知道为什么。我在过去和这个项目中都有这样的覆盖。另外 StyledFieldWrapper 不只包含覆盖，它也有自己的风格，我甚至看不到这些。

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

注：我已经尝试使用了在 在Styled-Components中对嵌套组件进行样式设计。 但没有成功。

Answer 1

EDIT:

既然你想让样式应用于自定义组件，你还需要手动将styled-components生成的className分配给该组件的顶层元素。类似这样。

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

---

这个问题可能与以下几点有关 CSS规格中定义的原始css样式。FieldWrapper 的 "重要性 "要高于 Form. 如果你检查你的元素，你可能会看到这两种风格都被应用，但前者比后者有优先权。

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

请看上面的链接，了解更多的信息如何做到这一点。还可以查看 级联和继承:

一旦你理解了源顺序的重要性，在某些时候你会遇到这样的情况：你知道一个规则在样式表的后面，但却应用了一个较早的、相互冲突的规则。这是因为早期的规则有更高的特殊性--它更特殊，因此被浏览器选择为应该为元素设置样式的规则。

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

这里需要注意的是，虽然我们考虑的是选择器，以及应用于它们所选择的事物的规则，但被覆盖的并不是整个规则，只有相同的属性。

一个选择器所具有的特异性数量是用四个不同的值（或组件）来衡量的，可以认为是千、百、十和一--四个列中的四个单数。

1. 千: 如果声明在样式属性里面，也就是内联样式里面，在这一栏得1分。这种声明没有选择器，所以它们的特异性总是简单的1000。
2. 百: 在这一栏中，每一个ID选择器包含在总选择器中，得1分。
3. 十: 在这一栏中，每一个包含在整体选择器中的类选择器、属性选择器或伪类得1分。
4. 在此列中，每一个类选择器、属性选择器或伪类包含在整体选择器中，都得1分。: 在这一栏中，每个元素选择器或包含在总选择器中的伪元素得1分。

下面是MDN的一个例子。

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

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