<OpacityPress top={314} left={78} width={950} color={"red"} height={70} />
---
const {
width,
height,
left,
right,
top,
bottom,
component,
class: clsssName,
color,
} = Astro.props
console.log("width", typeof width, width)
const Component = component || "div"
---
<Component class:list={["opacity-press", clsssName]}>sas1</Component>
<style define:vars={{width, height, left, right, top, bottom, color}}>
.opacity-press {
border: 1px solid skyblue;
position: absolute;
color: var(--color);
background-color: transparent;
top: calc(100 / 1920 * var(--top) * 1vw);
left: calc(100 / 1920 * var(--left) * 1vw);
width: calc(100 / 1920 * var(--width) * 1vw);
height: calc(100 / 1920 * var(--height) * 1vw);
}
</style>
#define:vars is invalid but your demo is wrk,please i need help
broken locust
opal tinsel
What issue are you encountering @broken locust ?
opal tinsel
var(--color) top ,left width height all are invalid
What do they look like in your browser console?
opal tinsel
var() is a css thing, it won't get replaced by the actual value of the css variable if that you'd expect
broken locust
I look at the example of the astro document, using define:vars, you can pass the js variable to css.
past yew
You should look for where --color is set. While, the CSS will look something like:
.opacity-press {
color: var(--color);
}
You should also see --color: red; probably on the DOM element for that component, e.g.:
<div
class="opacity-press"
style="--color: red;"
></div>
---
const foregroundColor = "rgb(221 243 228)";
const backgroundColor = "rgb(24 121 78)";
const message = "Astro is awesome!";
---
<style define:vars={{ textColor: foregroundColor, backgroundColor }}>
h1 {
background-color: var(--backgroundColor);
color: var(--textColor);
}
</style>
<script define:vars={{ message }}>
alert(message);
</script>
--foregroundColor is from js varient, it same as prop ?