Select to view content in your preferred language

Calcite-notice background color in Angular

126
1
02-25-2025 01:35 AM
BikkiGeisler
New Contributor

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?

0 Kudos
1 Reply
KittyHurley
Esri Contributor

@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.

0 Kudos