Read a variable from tsx to scss file

Question

I need to make a custom component in stencil where the color is dynamic. Any way to take the value of variable from tsx and access it on scss file.

The code is below.

https://stackblitz.com/edit/stenicil-starter-component-oeyzhz?file=src%2Fcomponents%2Fmy-component%2Fmy-component.tsx&file=src%2Fcomponents%2Fmy-component%2Fmy-component.css

Answer 1

The only styling variables you will be able to read at runtime are CSS custom properties.

CSS/SCSS :

:root {
   --foo-bar: red;
}

JS/TS :

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get red