是否可以从外部覆盖现有的样式化组件样式？

Question

我想更改现有软件包（不包含CSS）的样式，该软件包仅由样式化组件（js中100％的CSS）构建。

因此，假设我有一个软件包： superawesome-styled-components ，以及一个已使用这些组件的代码库。

示例：

A.js
import { Button } from 'superawesome-styled-components'

function A() {
   return(
      <Button />
   )
}




B.js
import { Button } from 'superawesome-styled-components'

function A() {
   return(
      <Button />
   )
}




C.js
import { Button } from 'superawesome-styled-components'

function A() {
   return(
      <Button />
   )
}

如您所见，我将Button导入了多个文件。这就是问题所在...我该如何更改<Button />的样式，以便在所有情况下都可以更改。 （无需打开每个文件，并更改按钮组件）

不使用CSS

请注意，我将无法使用超棒样式的组件

Answer 1

简短的答案是，您可以... requests内部分配一个className ...您可以使用chrome dev工具查看该className是什么，并通过CSS覆盖它...

在此处查看有效的示例：https://codesandbox.io/s/0yzzwk20yn

主按钮应该是紫色的...但是在styles.css中，我将其覆盖并设为红色...

Answer 2

在导入Button类之后，但在使用它之前（一次在最终输出文件的顶部），您需要修改Button类，以便解释它的框架（反应？）可以看到更改。

根据您的构建过程，您可能只需要在加载Button文件之后但使用它之前将js文件添加到页面中。该文件将覆盖js属性以进行样式设置。如果您使用模块加载器，这可能会很棘手，但应该可行。

我不知道反应如何，但是最终只是js，所以弄清楚您需要在哪里注入更改，并且只需要执行一次即可。

首先查看文件的输出顺序，这应该使您了解哪些文件需要更新才能使其正常工作。