In my vue3 project, I used vue3-style-components, but when I add class in components which is created by vue3-style-components it renders duplicate classes. like this:
How can I prevent duplicate class rendering?
This is my vuejs code:
And This is Style-components Code:
I know this doesnt answer your question - but I would recommend destructing your props/theme not on the individual css attributes but as a wrapping function and then using the css function from styled-components as well, like:
import Styled, { css } from 'vue3-styled-components'
const props = ['type', 'shape']
const ButtonStyled = Styled('button', props)`
${({ type, theme }) => css`
background: ${ type !== 'default' && theme[`${type}-color] + '' }
`}
`
Because this operation can be expensive, so performing the callback to get the type and theme variables over and over could really slow down performance.
Also I would consider whether or not you need to check the type here or if that maybe is a task better suited for the theme - if there is no theme["default-color"] then you can just use the nullish coalescent operator as such theme[${type}-color] ?? '' to the same effect, if will then default to an empty string if the first variable is null or undefined.
As for your actual issue - its difficult to tell unless you supply some information about where these classes are actually applied, because I cant see any of them being set in the code you supplied.