时间戳

首页 > 解决方案 > 作为内容脚本注入时，材质 UI 样式完全损坏

reactjs - 作为内容脚本注入时，材质 UI 样式完全损坏

问题描述

我正在使用向 LinkedIn 和 XING 注入内容脚本的材料 UI 开发一个小的浏览器/chrome 扩展。XING 页面实际上是这样的（一切正常）： 材质 UI 输入字段工作正常

但是当页面在 LinkedIn 上加载时，输入卡看起来坏了： LinkedIn的输入中断

我已经在尝试找出是否有任何全局 CSS 类正在覆盖某些内容，但我找不到。有谁知道，什么可能导致这种行为？我像这样注入 React App：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
    BrowserRouter as Router
  } from "react-router-dom";
  import Overlay from './overlay'

window.addEventListener("load", init, false);
window.addEventListener("loadend", init, false);


function init() {

    var div = document.createElement( 'div' )
    document.body.appendChild( div )
    div.id = 'voyager-extension-overlay'
    div.style.position = 'fixed'
    div.style.zIndex = '10'

    ReactDOM.render( <Router><Overlay /></Router> , div)

}

任何好的提示都非常感谢:)

标签： reactjsmaterial-ui

解决方案

您会看到材料的默认样式丢失。这可能与 css 导入的顺序有关。我会在开发工具的元素选项卡中仔细查看这两种情况下的顺序。

推荐阅读