Decide Literal Template with variable

[owjs3901]

Using Literal Template in JSX syntax.

A property becomes dynamic when it contains variables like this.

<Box w={`100%`} /> // static!!

<Box w={`${v}%`} /> // Dynamic

In this case, the whole value will be dynamic value.

<Box w={`${v}%`} /> // Dynamic

// after
<div className={"a"} style={{b: `${v}%`}} />

// .a{w: var(--b)}

However, we can use hybride approach like this.

<Box w={`${v}%`} /> // Dynamic

// after
<div className={"a"} style={{--b: v}} />
// .a{w: var(--b)%}

Complex Example

<Box bg={`rgba(${v1},${v2},${v3})`} /> // Dynamic

// after
<div className="a" style={{--b: v1, --c: v2, --d: v3`}} />
// .a{background: rgba(var(--b),var(--c),var(--d))}

Which approach is better?