How do i fix CSS issue of an Angular Web Component in React Application?

Question

I have a simple React Application and I imported an Angular Web Component with some widget from Angular Material UI(Buttons/Tables/RadioButtons). When running this React Application, the Angular Web Component's functionality like the buttons/tables/radio works just fine. However, the styling/animations of the Angular Material UI don't seem to be working at all.

Here's some screenshot of my issue:

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

Would appreciate any React or Angular experts for advice. :)

Answer 1

Manage to find a solution for this question i posted. Link a css to your component js file and add the following line in that css.

Example:

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";