繁体   English   中英

扩展/覆盖导入的 React 组件的样式

Extending / Overwriting styles of an imported React Component

提示:本站收集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 的子项但更改其某些样式?

1 个回复

ComponentB不接受任何道具,因此您传递给它的任何内容都将被完全忽略。 你需要编辑你的组件,这样一些样式道具可以一直贯穿到 DOM。

如何实现覆盖样式取决于您。 它是className还是CSSProperties对象? 样式是否适用于S.ContainerS.Content ,或者您可以通过名称为containerStylecontentStyle类的单独道具对两者进行样式设置吗?

您可以将整个ComponentB包装在styled(ComponentB)声明中,这样做是创建一个具有正确样式的className属性(文档链接)。 为了使其工作,您的ComponentB必须采用这个className并将其传递,以便它最终附加到 DOM。

2 向导入的组件添加样式

我有以下组成部分: HelloWorld.js 我将其导入另一个文件中,如下所示: SignIn.js 正如您在SignIn.js中看到的那样 ,我想将styles.signInText包含在组件中,但是由于已经在HelloWorld.js中将style属性设置为,因 ...

3 扩展从NPM模块导入的React组件(打字稿)

我有一个用打字稿开发的NPM模块。 该模块是一个简单的概念验证反应组件: 通过使用tsc和适当的tsconfig.json ,我生成了js文件。 在另一个项目中,我导入了这个npm模块,我可以COne渲染组件COne 。 在第二个项目中,我创建了另一个组件CTwo ,它扩展 ...

5 WebPack 向导入的样式表的类添加下划线,打破了 React 组件的样式

我在电子反应应用程序上遇到了一个奇怪的问题。 基本上,当我导入 NMP 包React-Quill的样式表时,它是一个块样式的编辑器作为反应组件 按照说明,我将样式表导入为 但是没有实际的样式应用于组件。 我已经追踪到这是一个奇怪的问题,编译的 CSS 出现在标题内的样式标签中 下划线不应该在 ...

8 正确扩展ExtJS组件而不覆盖侦听器

请考虑以下示例类Parent : }; 和以下类Child扩展上面的默认Parent : 即使Child没有为render指定一个监听器(它只提供afterrender ), render监听器(在Parent类中定义)也不再在Child的组件渲染时触发; 即侦听器被新的 ...

10 为什么子组件样式被全局 css 覆盖?

我正在我的 index.html 中导入一个基本的 css 文件,其中包含宽度为 auto,但这种样式优先于我使用 styleUrls: ["..."] 在组件中定义的样式(使用宽度为 70%)。 确保我的组件范围的 css 优先于传统方式定义的样式的最佳方法是什么? 我应该将全局样式范围限定在顶级 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM