Mik*_*keX 13 shadow-dom reactjs webpack webpack-style-loader react-css-modules
如何让 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;
}
<!-- rendered page -->
<head>
...
<style>.myComponent__container__hash123 { background: purple }</style>
</head>
<body>
...
<div class="myComponent__container__hash123">Hello!</div>
</body>
为了在影子根内部使用，我想将每个组件的编译 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>
这不适用于自行编译的组件库，因为我无法提前知道最终消费者。
to-string-loaderhttps://www.npmjs.com/package/css-to-string-loader
与 结合使用时style-loader，结果是类名未解析（例如styles.container === undefined）。
理想情况下import styles from './MyComponent'，除了类名映射之外，我还会包含已编译的 CSS 字符串 - 但是根据样式加载器文档，这不受支持
晚了两年，但是：
我不太确定这是否是您想要的，但在 React 中您可以将样式直接添加到 JSX 中，如下所示：
<style>
{`
body {
font-family: 'Inter', sans-serif;
font-size: 14px;
background-color: #151515;
color: white;
}
`}
</style>
或使用你的例子：
<style>
{`
.myComponent__container__hash123 {
background: purple;
}
`}
</style>
| 归档时间： |
|
| 查看次数： |
1109 次 |
| 最近记录： |