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

【问题标题】：Is it possible to override existing styled component styling from outside?是否可以从外部覆盖现有的样式组件样式？
【发布时间】：2018-11-15 22:38:01
【问题描述】：

我想更改现有包的样式（没有 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

请注意，我无法访问 superawesome-styled-components

【问题讨论】：

为什么不能修改原来的<Button />组件？这样它就会到处反映......
很遗憾，我无法访问它。
您可以选择使用主题。取决于您的 <Button /> 组件是否支持它。我的猜测是它可能。见这里：styled-components.com/docs/advanced

标签： css reactjs react-native styled-components

【解决方案1】：

简短的回答是可以...styled-components 在内部分配一个类名...您可以使用 chrome 开发工具查看该类名是什么并通过 CSS 覆盖它...

在此处查看一个工作示例：https://codesandbox.io/s/0yzzwk20yn

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

【讨论】：

好吧，这将是一个尝试，但团队绝对会在 0 css 方式上失败。（所以不幸的是，这是不行的）
所以你想改变按钮的样式但不能使用css或触摸样式组件...?

【解决方案2】：

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

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

我不知道反应很好，但它最终只是 js 所以弄清楚你需要在哪里注入变化，你应该只需要做一次。

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

【讨论】：