我有两个组件，为简洁起见，我在这里简化了代码...问题是，当我导入ComponentB用作ComponentA的子代时，我似乎无法更改ComponentB的样式。
我正在使用样式组件供参考。
示例：
在ComponentA中，我正在导入ComponentB。ComponentB是一个独立的组件，具有自己的样式和逻辑封装。当在ComponentA中使用它时，我需要覆盖/扩展某些ComponentB样式。
这是一个代码示例：
// ComponentB
import React from "react";
import * as S from "./ComponentB.styles"; // styled components
export function ComponentB() {
return (
<S.Container>
<S.Content
{...props}
/>
</S.Container>
)
}
// ComponentA file
import React from "react";
import { ComponentB } from "./ComponentB";
import * as S from "./ComponentA.styles"; // styled components
export function ComponentA() {
return (
<S.Container>
<S.Content
<ComponentB {...props} /> // I need to use ComponentB but change its styling
/>
</S.Container>
)
}
如何将ComponentB用作ComponentA的子代，但更改其某些样式？
ComponentB它不需要任何道具，因此传递给它的任何东西都将被完全忽略。您需要编辑组件，以便某些样式支持可以一直贯穿到DOM。
由您自己决定如何实现覆盖样式。是物体className还是CSSProperties物体？样式是否适用于S.Container，S.Content或您是否可以通过名称分别为containerStyle和的单独道具进行样式设置contentStyle？
您可以将整个内容包装ComponentB在styled(ComponentB)声明中，然后做的是创建className具有正确样式的道具（docs link）。为了使它起作用，您ComponentB必须接受className并传递它，以便最终将其附加到DOM。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句