What's the best way to avoid className duplication in components and set up an application theme?

I'm considering these options:

Option 1: Using @layer (doesn't work without !important – is this acceptable?)

@layer components {
.btn-primary {
@apply rounded-lg bg-red-700 text-slate-300 hover:bg-slate-800 focus:bg-slate-800 active:bg-slate-800;
}
}

Option 2: Duplicating all components in shared/ui/styled and reusing them as <StyledButton> (seems like redundant code)

Looking for advice on the cleanest approach.

gluestack v2