有什么方法可以更改 Material-UI 添加样式标签 html 元素的位置吗？

Question

Material-UI 将生成的样式标签添加到 <header /> 中，这当然是样式的标准位置，但是我需要将我的样式标签添加到不同的 html 元素中。

我正在寻找一种将遗留 CodeIgniter PHP 应用程序转换为 React 的方法。我有一个计划，但问题是这个遗留应用程序正在使用 bootstrap，这会扰乱我的 React 组件。

计划重置 div 中的所有样式并在其中渲染 React 组件。类似于：

<div class="clearcss">
    <div>
        <style type="text/css"></style> // material ui style tags
        <div id="react-component"></div>
    </div>
</div>

不幸的是，因为 Material ui 将其所有样式添加到 header Material ui 样式也被重置，但如果我可以更改位置material ui 放置样式标签然后我想我可以让它工作。

Answer 1

实际上，在 JSS documentation 中，我找到了说明如何在 <head /> 之外指定插入点的示例。

连同 Ryan 的评论指向 material ui documentation 我能够实现我想要的。

JSS 支持两种为样式指定自定义插入点的方法：

通过添加 html 评论（例如 ）。这仅支持 <head>.
中的插入点
通过指定一个元素（例如insertionPoint: document.getElementById("custom-jss-insertion-point")）。此方法支持在文档正文中插入点。

这是第二种方法所需的工作示例：

index.html -- 添加一个元素，样式将在

之后插入

...
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="custom-jss-insertion-point"></div>
    <div id="root"></div>
  </body>
...

App.js -- 告诉 JSS 关于自定义插入点

import React from "react";
import { create } from "jss";
import { StylesProvider, jssPreset } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const jss = create({
  ...jssPreset(),
  // Define a custom insertion point that JSS will look for when injecting the styles into the DOM.
  insertionPoint: document.getElementById("custom-jss-insertion-point")
});

export default function App() {
  return (
    <StylesProvider jss={jss}>
      <div className="App">
        <Button variant="contained" color="primary">
          Hello
        </Button>
      </div>
    </StylesProvider>
  );
}

这会导致添加样式，如下图所示：

如果使用 React 渲染插入点元素，在配置 JSS 时尝试调用 document.getElementById("custom-jss-insertion-point") 之前需要确保该元素存在。如果可能的话，我建议在 React 之外渲染插入点元素（如示例中所示）以避免操作顺序复杂化。

有什么方法可以更改 Material-UI 添加样式标签 html 元素的位置吗？

Is there any way to change where Material-UI adds style tag html elements?

reactjs

material-ui

jss