Не работает импорт стилей в React при интеграции в Angular приложение

Question

Моя задача интегрировать React в Angular приложение. Для этого был создан компонент, который будет служить "мостом" между Angular и React:

import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
import { ReactRootComponent } from "./ReactRootComponent/ReactRootComponent";
import React from "react";
import ReactDOM from "react-dom";

@Component({
  selector: "app-integration",
  template: `<div #reactRoot></div>`,
})
export class IntegrationComponent implements OnInit {
  @ViewChild("reactRoot", { read: ElementRef, static: true })
  ref: ElementRef;
  constructor() {}

  public ngOnInit(): void {
    this.renderComponent();
  }

  public ngOnChanges(): void {
    this.renderComponent();
  }

  private renderComponent() {
    ReactDOM.render(
      React.createElement(ReactRootComponent),
      this.ref.nativeElement
    );
  }
}

Сам же ReactRootComponent выглядит вот так:

import React from "react";
import "./test.css";


export const ReactRootComponent: React.FC = () => {

  return (
    <div className="test">
     Hello world
    </div>
  );
};

Приложение работает, компонент React рендерится. Но проблема в том, что стили не применяются, import "./test.css не работает. Я пробовал и в качестве модуля импортировать этот файл стилей: import styles from "./test.module.css". Здесь и вовсе ругается

Не удается найти модуль "./test.module.css" или связанные с ним объявления типов

Как исправить неработающие импорты?

Answer 1

Смог откопать решение проблемы!

Для компонента-моста в декоратор @Component задаем следующие параметры: styleUrl с путем на нужный CSS/SCSS файл и encapsulation со значением ViewEncapsulation.None.

В общем итоге, всё должно выглядеть таким образом:

@Component({
  selector: "app-integration",
  template: `<div #reactRoot></div>`,
  styleUrls: ["./test.scss"],
  encapsulation: ViewEncapsulation.None,
})

В самом уже React компоненте импортируем указанный в styleUrls файл стилей:

import "./../test.scss";

Моя структура папок в проекте:

БЛОГ НА HUSL

Не работает импорт стилей в React при интеграции в Angular приложение

Ответы (1 шт):