React如何动态修改全局样式组件？styled-components全局样式切换不触发重渲染问题

你当前的条件切换写法不生效，核心原因是 createGlobalStyle 生成的全局样式组件，默认情况下切换不同实例时，旧组件注入的全局样式规则不会被自动清除，新旧样式冲突就会导致视觉上没有更新。

以下是两种可直接落地的实现方案： #

方案1（推荐）：通过Props动态注入样式 #

只需要定义一个全局样式组件，把动态变量通过props传递进去即可，styled-components会自动监听props变化更新全局样式：
定义全局样式代码：

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    /* 其他固定全局样式统一写在这里 */
    background-color: ${props => props.changeColor ? '#ffffff' : '#000000'};
  }
`

组件内调用：

return (
  <>
    <GlobalStyle changeColor={changeColor} />
    {/* 其余业务代码 */}
  </>
)

该方案性能最优，也符合styled-components的设计规范。 #

方案2：给条件渲染的全局组件加唯一key #

如果你的业务场景确实需要拆分多个独立的全局样式组件，只需要给每个组件加唯一的key属性，强制React在切换时卸载旧的全局样式组件，styled-components会在组件卸载时自动清除它注入的样式规则：

return (
  <>
    { changeColor? <GlobalStyleWhite key="white-theme" /> : <GlobalStyleBlack key="black-theme" /> }
    {/* 其余业务代码 */}
  </>
)

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