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

Posted 2023-02-22

【中文标题】如何修复 React 应用程序中 Angular Web 组件的 CSS 问题？

【英文标题】：How do i fix CSS issue of an Angular Web Component in React Application?

【发布时间】：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 属性。

【参考方案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";