I'm working on an Angular project and I would like to change the background color of a calcite notice component.
I've tried applying a CSS variable, but it doesn't seem to work:
calcite-notice {
--calcite-notice-background-color: red;
}
Since this didn't work, I implemented a workaround by wrapping the calcite notice in a div and applying a background color to the wrapper. However, I would prefer to change the actual notice component’s background instead.
Does anyone know a proper way to achieve this? Is there a CSS variable or ::part() selector that can be used for styling the background directly?
@BikkiGeisler Notice's CSS variables were introduced with version 3.0, as long as you've upgraded to version 3 you should be able to use the --calcite-notice-background-color CSS variable. Also be sure to check out the get started page, as there have been some small improvements to get started with version 3.