我如何修复 React 应用程序中 Angular Web 组件的 CSS 问题？

Question

我有一个简单的 React 应用程序，我从 Angular Material UI(Buttons/Tables/RadioButtons) 导入了一个 Angular Web 组件和一些小部件。当 运行 这个 React 应用程序时，Angular Web 组件的功能就像 buttons/tables/radio 一样工作得很好。但是，Angular Material UI 的 styling/animations 似乎根本不起作用。

这是我的问题的一些截图：

The radio button that is initially in the Angular Application

The radio button after it is imported as an Angular Web Component and place inside a React Application

感谢任何 React 或 Angular 专家的建议。 :)

Answer 1

设法找到我发布的这个问题的解决方案。 Link a css 到您的组件 js 文件并在该 css.

中添加以下行

示例：

Angular.js

import React, { Component } from 'react';
import "./angular3.css";



export default class Angular3 extends Component {
    render(){
        return(
            <div>
                <your-custom-element-tag></your-custom-element-tag>
            </div>
        )
    }
}

---

angular3.css

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";