styled-components中能否扩展通过createGlobalStyle创建的全局样式？

你尝试的直接用styled(GlobalStyle)包裹扩展的写法不可行，原因是createGlobalStyle返回的是专门处理全局样式的特殊组件，不符合styled-components常规样式组件的继承规则，无法通过该方式注入扩展样式。

以下是两种可行的实现方案： #

方案1：双全局样式组件叠加渲染（最简便） #

利用CSS层叠的优先级特性，同时渲染第三方全局样式和你自定义的全局样式，后渲染的样式会覆盖前者同优先级的规则，直接实现扩展效果。
代码示例：

import { createGlobalStyle } from 'styled-components';
// 重命名避免命名冲突
import { GlobalStyle as ThirdPartyGlobalStyle } from "another-library";

// 自定义扩展的全局样式
const MyExtendedGlobalStyle = createGlobalStyle`
select {
  background-color: #f60;
}
`

// 在应用根组件中按顺序渲染两个全局样式组件即可
function RootApp() {
  return (
    <>
      <ThirdPartyGlobalStyle />
      <MyExtendedGlobalStyle />
      {/* 其余应用代码 */}
    </>
  )
}

如果遇到自定义样式优先级不足无法覆盖的情况，可以通过提升选择器权重解决，比如把选择器写为body select，必要时也可添加!important声明。 #

方案2：合并样式到单个全局组件（适用于需要统一管控全局样式的场景） #

如果第三方库暴露了内部的全局样式字符串，你可以直接将其和自定义样式拼接后生成新的全局样式组件：

import { createGlobalStyle } from 'styled-components';
import { globalStyleText } from "another-library";

const MergedGlobalStyle = createGlobalStyle`
${globalStyleText}
select {
  background-color: #f60;
}
`

注意：该方案依赖第三方库对外暴露原始样式字符串，若未暴露则无法使用。

内容的提问来源于stack exchange，提问作者allrenders