小编Mik*_*keX的帖子

将 CSS 模块注入每个组件的样式元素（为了可移植到 shadow root）

翻译：博士

如何让 React 组件的 CSS 在影子根中工作，同时保持 CSS Modules 类的封装优势？我想插入每个组件的<style>元素而不是内部<head>或另一个任意元素。

我拥有的

我目前正在 React 中使用带有自定义 Webpack 脚本的 CSS 模块；[style-loader, css-loader, sass-loader]以传统方式。生成的编译后的 CSS 作为<style>标签注入head.


    // MyComponent.jsx
    import React from 'react';
    import styles from './MyComponent.scss';

    export const MyComponent = () => {
      return <div className={styles.container}>Hello!</div>
    }

    // MyComponent.scss
    .container {
      background: purple;
    }

Run Code Online (Sandbox Code Playgroud)

结果

    <!-- rendered page -->
    <head>
      ...
      <style>.myComponent__container__hash123 { background: purple }</style>
    </head>
    <body>
      ...
      <div class="myComponent__container__hash123">Hello!</div>
    </body>

Run Code Online (Sandbox Code Playgroud)