Open kasar-NTT opened 2 months ago
@kasar-NTT, styles are isolated in shadow-root and majority of the styles cannot be inherited from the root. This includes css variables, hence the undefined. I see that the root is open, have you passed in a styles sheet that imports carbon styles?
The following mdn docs may be useful to adding style to the shadow root:
@Akshat55 you are right, in my MFE application i have set the encapsulation to ShadowDom.
I have imported to the styles.scss the: @import "@carbon/styles/scss/components/button"
and also in my specific component that is visible in the screenshot as well. I tried also with: @import "@carbon/styles
and adding the fonts path that is required for that kind of import, but no luck
Have you tried setting the theme in the html for the MFE? Carbon v5 makes use of css variables and you can set these variables by importing the theme in the root as following:
I will try that and come back for feedback! Thanks @Akshat55
Update,
the only to manage having the styles available on my components is by importing the required scss of the carbon component i want to use.
For example if i need to use the carbon dropdown i need to import into my-component.scss ->
@import "@carbon/styles/scss/components/dropdown/index";
This is the way i manage to get the required styles
Thank you for updating the issue and posting your solution!
It's odd that you would have to import individual component styling. I'm not 100% sure if this is possible, but can't you just create a global stylesheet with the following code in your assets directory and inject it into shadow root?
// general stylesheet to inject
@use '@carbon/styles';
body { // Body or component tag?
@include styles.theme(styles.$white);
}
Detailed description
Additional information
--cds-layout-size-height-local
among with others are undefinedAlso, it mentions that it inherits the styles from app-root, instead of the @carbon related styles
While working on the MFE as a standalone, everything works as expected:
and the properties are inherited correctly: