如何将emotion全局样式限制在更窄的选择器范围内？

要把Emotion生成的所有样式（包括Chakra UI的全局样式）都限制在特定选择器下，核心思路是通过自定义Stylis插件给每个生成的CSS选择器自动添加父级选择器前缀，实现类似你给出的SCSS嵌套效果。

具体步骤： #

1. 编写Stylis作用域插件
   这个插件会遍历所有生成的选择器，给每个选择器加上你指定的父选择器前缀：

   // 生成作用域插件的工厂函数
   const createScopePlugin = (parentSelector) => {
     return (_, __, selectors) => {
       // 给每个选择器拼接父选择器前缀
       return selectors.map(sel => `${parentSelector} ${sel}`).join(',')
     }
   }
   
   // 实例化插件，指定目标父选择器
   const demoScopePlugin = createScopePlugin('div#my-styled-div')
   

2. 配置Emotion缓存并注入插件
   在你的Chakra UI演示页面的根组件中，通过Emotion的CacheProvider替换默认缓存，把自定义插件加入Stylis处理链：

   import { CacheProvider } from '@emotion/react'
   import createCache from '@emotion/cache'
   import { ChakraProvider } from '@chakra-ui/react'
   // 导入你的Chakra主题
   import chakraDemoTheme from './chakra-demo-theme'
   
   // 创建带作用域插件的Emotion缓存
   const demoCache = createCache({
     key: 'chakra-demo-cache',
     stylisPlugins: [demoScopePlugin],
   })
   
   export default function ChakraQueryBuilderDemo() {
     return (
       <CacheProvider value={demoCache}>
         {/* 目标容器，样式仅作用于此容器内部 */}
         <div id="my-styled-div">
           <ChakraProvider theme={chakraDemoTheme}>
             {/* 这里放你的React Query Builder演示内容 */}
           </ChakraProvider>
         </div>
       </CacheProvider>
     )
   }
   

关键说明： #

• 这个方案会处理所有通过当前Emotion缓存生成的样式，包括Chakra UI的全局重置样式、组件主题样式，以及你用styled或css API写的自定义样式。
• 确保只在演示页面使用这个缓存配置，Docusaurus的其他页面仍使用默认样式系统，避免互相影响。
• 如果有个别选择器不需要添加前缀，可以在插件里做针对性过滤，但一般演示场景不需要额外处理。

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