TL：DR
如何让React组件的CSS在影子根目录中工作，同时保持CSS Modules类的封装优势？我想插入每个组件的<style>元素，而不是插入<head>或其他任意元素。
我拥有的
我目前正在React中使用CSS模块和一个自定义Webpack脚本;生成的编译后的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;
}结果
<!-- rendered page -->
<head>
...
<style>.myComponent__container__hash123 { background: purple }</style>
</head>
<body>
...
<div class="myComponent__container__hash123">Hello!</div>
</body>我想要的
为了在shadow根目录中使用，我希望将每个组件的编译CSS注入到其根目录上的<style>标记中。
<!-- rendered page -->
<head>
...
</head>
<body>
...
<div>
#shadow-root
<div class="myComponent__container__hash123">Hello!</div>
<style>.myComponent__container__hash123 { background: purple }</style>
#end shadow-root
</div>
</body>我所尝试的
1.插入
这对于自行编译的组件库不起作用，因为我无法提前知道最终消费者。
第二章
https://www.npmjs.com/package/css-to-string-loader
当与style-loader结合使用时，结果是类名不能被解析（例如styles.container === undefined）。
理想情况下，我会让import styles from './MyComponent'包含编译的CSS字符串以及类名Map-但是，style-loader docs不支持此操作
2条答案
按热度按时间lbsnaicq1#
两年太晚了，但是：
我不太确定这是否是您想要的，但是在React中，您可以直接将样式添加到JSX中，如下所示：
或使用您的示例：
dced5bon2#
您可以使用带有
insert参数的Webpack“样式加载器”插件。有关详细信息，请参阅此部分。