提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我有两个组件，为了简洁起见，我在这里简化了代码...问题是，当我导入 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属性（文档链接）。 为了使其工作，您的ComponentB必须采用这个className并将其传递，以便它最终附加到 DOM。
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.