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