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

【问题标题】：How do i fix CSS issue of an Angular Web Component in React Application?如何修复 React 应用程序中 Angular Web 组件的 CSS 问题？
【发布时间】：2020-11-10 10:17:44
【问题描述】：

我有一个简单的 React 应用程序，我从 Angular Material UI（Buttons/Tables/RadioButtons）导入了一个带有一些小部件的 Angular Web 组件。运行这个 React 应用程序时，Angular Web 组件的功能（如按钮/表格/收音机）工作得很好。但是，Angular Material UI 的样式/动画似乎根本不起作用。

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

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 专家的建议。 :)

【问题讨论】：

您的 React 应用程序中可能存在冲突的 CSS。如果您右键单击每个应用程序中的单选按钮并检查元素，Chrome（和其他浏览器）将显示哪些 CSS 样式应用于该元素。
嗨@cjd82187，是的，这是可能的。但是我确实继续并右键单击进行检查，但问题是因为 css 实际上来自 @angular/material/radio ，所以当我将这个 Angular Web 组件放入 React 应用程序时，它似乎没有阅读任何@angular/material/radio 属性。

标签： reactjs angular angular-material web-component react-material

【解决方案1】：

设法为我发布的这个问题找到解决方案。将 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";

【讨论】：