react-in-angular icon indicating copy to clipboard operation
react-in-angular copied to clipboard

can't actually use style within React Component - only from the wrapping angular component

Open yossibeck opened this issue 4 years ago • 1 comments

it seems that in src/components/my-react-component/MyReactComponent.tsx the line import './MyReactComponent.scss'; doesn't have any effect

the real CSS happens in the wrapper, e.g. the line styleUrls: ['./MyReactComponent.scss'], in MyReactComponentWrapper.tsx is what does the job. this kind of breaks the whole idea of having a separate component (e.g. code with styling) since the styling is bundled with the wrapper - not the react component

wondering if anyone was able to get around that

yossibeck avatar Jan 30 '21 20:01 yossibeck

I thought I had the same problem as you, but then, I checked again and noticed that my import path was wrong. I had…

import './my-comp-component.scss'

… but needed…

import './my-comp.component.scss'

And yes, the import statement is in the React component, not as styleUrls in the Angular Wrapper.

EDIT: Thought I had found the solution, but having same problem in the end :-(

Poitrin avatar Apr 09 '21 11:04 Poitrin