React组件导出至外部域名丢失样式，求非iframe封装解决方案

我修改了create-react-app的index.js，把npm run build的产物导出为可注入的React组件，代码如下：

window.inject = (rootElem) => {
  const root = ReactDOM.createRoot(rootElem);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
};

if (process.env.NODE_ENV !== "production") {
  window.codeBuilder = window.inject(document.getElementById("root"));
}

运行npm run build && serve -s build后，在外部域名通过以下方式加载组件：

<div id="myComponentHere"></div>
<script src="http://localhost:3000/static/js/main.min.js"></script>
<script>
  window.inject(document.querySelector('#myComponentHere'));
</script>

但组件样式并未生效，请问有没有工具包或更简洁的方式，无需iframe或手动加载样式就能实现样式封装？

1. 内联CSS到JS Bundle #

create-react-app默认会把CSS提取到单独的static/css/main.*.css文件，未加载该文件导致样式失效。可以通过修改打包配置将CSS内联进JS，加载脚本时自动插入样式：

• 用@craco/craco修改create-react-app配置，新建craco.config.js：

  module.exports = {
    webpack: {
      configure: (webpackConfig) => {
        const cssRule = webpackConfig.module.rules.find(rule => rule.oneOf);
        cssRule.oneOf.forEach(rule => {
          if (rule.test?.test('.css')) {
            rule.use = ['style-loader', 'css-loader'];
          }
        });
        return webpackConfig;
      }
    }
  };
  

  执行npm run build后，CSS会被打包进JS文件，加载组件脚本时自动将样式插入页面<style>标签，无需手动处理样式文件。

2. 使用CSS-in-JS方案 #

直接采用CSS-in-JS库（如styled-components、emotion），样式与组件逻辑绑定，打包后随JS一起加载，天然支持样式隔离：

• 以styled-components为例，改写组件样式：

  import styled from 'styled-components';
  
  const StyledCard = styled.div`
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
  `;
  
  function App() {
    return <StyledCard>Hello World</StyledCard>;
  }
  

  build后样式会通过JS动态插入页面，加载组件时自动生效，无需额外处理样式文件。

3. 动态自动加载样式文件 #

如果不想修改打包配置，可在inject函数中动态加载CSS文件：

window.inject = async (rootElem) => {
  // 先获取manifest文件，拿到正确的CSS路径
  const manifestRes = await fetch('http://localhost:3000/static/asset-manifest.json');
  const manifest = await manifestRes.json();
  const cssPath = manifest.files['main.css'];

  // 动态创建link标签加载CSS
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = `http://localhost:3000${cssPath}`;
  document.head.appendChild(link);

  const root = ReactDOM.createRoot(rootElem);
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
};

这种方式能自动匹配build生成的带哈希值的CSS文件名，避免手动修改路径的麻烦。

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