Angular: css variables are not usable in components

Question

Hi i am trying to use css variables to predefine colors for example.

Here is my app.component.css

:root {
  --main-bg1: rgb(26, 28, 29);
  --main-bg2: rgb(66, 77, 79);
  --main-bg3: rgb(93, 109, 112);
}

Problem is that when i use this variable in other components it wont work. For example

.some-class{
  background-color: var(--main-bg1);
}

How can i make this work in angular?

Angular uses view encapsulation, meaning the styles in component are scoped to that particular component. But, if you define styles in your global styles.css (or .scss), they are available globally. Personally, I create variables.scss in the root of the project and declare the variables there. Then, you can use @import "src/variables.scss" in your component and use the variables defined there. You can also disable view encapsulation (as explained in docs), but I'd go against that as it can get really messy in bigger projects. — TotallyNewb
– TotallyNewb, Commented Jul 21, 2021 at 11:25

Serkan KONAKCI · Accepted Answer · 2022-05-10 20:52:10Z

11

Add your variables to :host scope in your.component.scss file.

_{your.component.html}

:host {
  --drawer-width: 300px;
  --drawer-height: 65px;
  --drawer-top-height: 65px;
  --drawer-top: #ffffff;
  --drawer-left: red;
  --drawer-right: #f5f5f7;
  --drawer-top-bottom: red;

  /* Usage sample of variable */
  .use-sample-in-div {
    background: var(--drawer-left);
  }
}

You can also change the values using the main styles.scss. First, add a class name to your component to be top priority.

_{app.component.html}

<Drawer class="drawer-class"></Drawer>

_styles.scss

:root .drawer-class {
  --drawer-width: 150px;
  --drawer-height: 32px;
  --drawer-top-height: 32px;
  --drawer-top: blue;
  --drawer-left: green;
  --drawer-right: purple;
  --drawer-top-bottom: pink;
}

edited May 10, 2022 at 20:52

answered May 10, 2022 at 20:46

Serkan KONAKCI

1,41017 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

robert · Accepted Answer · 2021-07-21 11:25:57Z

3

Move this:

:root {
  --main-bg1: rgb(26, 28, 29);
  --main-bg2: rgb(66, 77, 79);
  --main-bg3: rgb(93, 109, 112);
}

to styles.css and then it will work

Demo

answered Jul 21, 2021 at 11:25

robert

6,1907 gold badges31 silver badges41 bronze badges

Comments

Chrillewoodz · Accepted Answer · 2021-07-21 11:26:10Z

2

Put these styles into styles.css instead:

:root {
  --main-bg1: rgb(26, 28, 29);
  --main-bg2: rgb(66, 77, 79);
  --main-bg3: rgb(93, 109, 112);
}

answered Jul 21, 2021 at 11:26

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

Collectives™ on Stack Overflow

Angular: css variables are not usable in components

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related