引用样式化组件

Question

我有一个关于样式化组件的问题，以及当一个样式化组件被另一个样式化组件引用时会发生什么。

我知道带有 Link 示例的官方文档，但是 我不明白当引用样式化组件时到底发生了什么。

所以我的问题是：在下面的示例中 - 引用 ${A}, ${B} 是否将其样式传递给包装器？或仅引用它，因此更改特定属性。

这是如何处理的？

例如：

const A = styled.div`
    background-color: red;
    margin-top: 10px;
`

const B = styled.div`
    background-color: blue;
`

const Wrapper = styled.div`
    ${A}, ${B} {
        background-color: green;
    }
`
export const NiceComponent: React.FC = () => {
    return (
        <Wrapper>
            <A />
            <B />
        </Wrapper >
    );

Answer 1

Referencing other styled components（在您的示例中 A 和 B）作为带样式组件（此处 Wrapper）的 pseudo-SCSS 字符串模板内的插值相当于在您的选择器中使用他们的（自动分配的）class 名称。

通过这种方式，您可以引用祖先（如文档中所做的那样），或以 children 为目标（如您的示例中所示）。

因此，此技术不会“通过样式”；为此，您可以为另一个样式化的组件设置样式，例如继承（例如，您可以 const Child = styled(A))

在您的示例中，styled-components 将为每个组件分配一个 class 名称；让我们对组件 A 说“scAAA”，对 B 说“scBBB”。然后这个代码：

const Wrapper = styled.div`
    ${A}, ${B} {
        background-color: green;
    }
`

...翻译成：

const Wrapper = styled.div`
    .scAAA, .scBBB {
        background-color: green;
    }
`

所以它所做的是为所有 A 和 B 组件定义一个新的背景颜色，这些组件是 Wrapper 的 children。

但如果您在 Wrapper 之外使用它们，它们将只有初始样式。

引用样式化组件

Referencing Styled Component

javascript

typescript

reactjs

styled-components