如何为styled-components 5.3.5生成的CSS规则全局添加父类前缀

问题场景 #

应用需要被加载到带有指定类名（例：.my-app）的父容器div中，需要让styled-components生成的所有CSS选择器自动拼接.my-app 前缀，避免和页面其他样式冲突。

示例组件代码：

import React from 'react';
import styled from 'styled-components';

const Button = (props) => {
  return <StyledButton type="button">foo</StyledButton>;
};

const StyledButton = styled.button`
  color: blue;
`;

export default Button;

默认生成的样式效果：

<style data-styled="active" data-styled-version="5.1.1">
    .cuetwY { color: blue; }
</style>
<div class="my-app">
    <button class="cuetwY">foo</button>
</div>

期望实现的效果：

<style data-styled="active" data-styled-version="5.1.1">
    /* 自动追加父级前缀 */
    .my-app .cuetwY { color: blue; }
</style>
<div class="my-app">
    <button class="cuetwY">foo</button>
</div>

之前尝试的第三方插件均只适配旧版styled-components，而适配React18的新版styled-components无法使用这些插件，旧版styled-components本身又不兼容React18。

可行方案（兼容React18 + styled-components v5.3+/v6.x） #

适配React18的styled-components版本内置了stylis v4，支持自定义编译插件，不需要依赖第三方老旧包，十几行代码就能实现全局前缀追加。

1. 编写自定义作用域插件 #

// 传入父类选择器，返回stylis插件
const scopePlugin = (parentSelector) => (context, _, selectors) => {
  // 仅在选择器处理阶段执行
  if (context !== 2) return;
  selectors.forEach((selector, idx) => {
    // 跳过@规则、根选择器、关键帧等不需要加前缀的场景
    if (selector.startsWith('@') || selector === ':root' || selector.includes('@keyframes')) return;
    selectors[idx] = `${parentSelector} ${selector}`;
  });
};

2. 全局注入插件 #

在应用根节点用StyleSheetManager包裹，传入插件即可全局生效：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { StyleSheetManager } from 'styled-components';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <StyleSheetManager stylisPlugins={[scopePlugin('.my-app')]}>
    <App />
  </StyleSheetManager>
);

注意点 #

• 该方案对嵌套选择器同样生效，比如&:hover、.child-class这类写法，最终都会自动带上父级前缀
• createGlobalStyle定义的全局样式中，@font-face、@keyframes等特殊规则不会被误加前缀
• 如果需要让个别组件跳过前缀规则，单独给组件包裹一层StyleSheetManager并传入空的stylisPlugins数组即可
• 服务端渲染场景下该配置同样生效，不需要额外适配

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