Question

我有一个React应用程序通过一些填充JavaScript加载到父文档中：

创建一个<iframe>元素
创建一个<div>
将<style>标记注入到<head>中，以设置插入的<div>的样式

大致来说，这可以通过以下方式实现：

// example.jsx

// Require the css using css-loader
const styles = require('../styles/example.css');

// Find the parent document
const doc = window.parent.document;

// Inject our stylesheet for the widget into the parent document's
// HEAD as a style tag
const css = styles.toString();
const style = doc.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}
doc.head.appendChild(style);

这在Webpack配置中使用css-loader，以便使require().toString()可以动态设置cssText。

虽然可行，但我不知道这个理想。而且我们更愿意编写Sass并获得@import的好处，以引入其他CSS（例如，重置），并获得针对Sass的其他工具的好处。

是否有更好的方法可以达到将<style>文本注入此父文档中的效果，而又不影响我们使用我们喜欢的工具的能力？

Answer 1

安装react-helmet，然后在您的react组件中尝试以下操作：

<Helmet>
    <style>
        // Insert CSS string here
    </style>
</Helmet>

另一种选择是将sass直接加载到父级中，但将其所有样式设置在sass函数之后，该函数检查#react-root是否存在。

从React应用程序加载Sass并将CSS文本注入父文档中

1 个答案: