how to apply dynamic textStyle?

[phonego-ryong]

I want to apply the textstyle differently depending on the props

• first
  
  It doesn't seem to be applicable to the overall textstyle, it seems to be only a part of it

• second
  
  

I want to declare var, but I get an error message.

Is there a way?

[phonego-ryong]

export const dynamicFontStyle = cva({
variants: {
fontStyle: {
title100: {
fontSize: '24px',
lineHeight: '32px',
},
title200: {
fontSize: '20px',
lineHeight: '28px',
},
body100: {
fontSize: '16px',
lineHeight: '24px',
},
body200: {
fontSize: '14px',
lineHeight: '20px',
},
caption100: {
fontSize: '12px',
lineHeight: '16px',
},
caption200: {
fontSize: '10px',
lineHeight: '16px',
},
label100: {
fontSize: '14px',
lineHeight: '20px',
},
label200: {
fontSize: '12px',
lineHeight: '16px',
},
},
},
});

Should I create and use cva in this way?

[astahmer]

yes that can work

[astahmer]

in your first screenshot, you renamed the textStyle property to fontStyle, this is most likely why it wasn't working as expected as this is a known limitation with the static analysis

[astahmer]

sorry I don't understand the question, can you show an example ?

[phonego-ryong]

Sorry I wasn't specific. In the second picture in the text, I'm trying to assign a value to the style under the name of '--badge', but an error like that occurs

[astahmer]

ah yes, this is just react and its typings, it's not related to Panda and it's a type only error (from Typescript), it works fine at runtime (in your browser)

[phonego-ryong]

I've confirmed that it's working. However, I can't build it due to an error at the time of build, so is there a solution?

[phonego-ryong]

i solved this error

style={{
'--badge':'test'
} as React.CSSProperties}

Is this the best way?