variant TS error when styling a dripsy comp
jjenzz opened this issue · comments
when using the styled
api to compose a dripsy comp as follows:
import { styled, Pressable } from 'dripsy';
export const Button = styled(Pressable, {
themeKey: "buttons",
defaultVariant: "medium",
})({
alignSelf: "center",
});
i'm presented with the following error:
to fix, i had to manually omit the variant
props from Pressable
before styling it:
type PressableProps = React.ComponentProps<typeof Pressable>;
type ButtonElement = React.ElementRef<typeof Pressable>;
interface ButtonProps extends Omit<PressableProps, "variant" | "variants"> {}
const ButtonImpl = React.forwardRef<ButtonElement, ButtonProps>(
(props, forwardedRef) => <Pressable {...props} ref={forwardedRef} />
);
const Button = styled(ButtonImpl, {
themeKey: "buttons",
defaultVariant: "medium",
})({
alignSelf: "center",
});
given that styled
will not forward the variant props to the wrapped component, it would be really handy if styled
could omit these types from the BaseComponentProps
also for me, or is there an alternative/simpler way i could be solving this?
previously the suggestion has been to wrap Pressable
from React Native directly for these cases. i can see if there is a way to fix this though — it might be as simple as styled
omitting variant
from the component passed to it. i’ll play with that.
the simplest fix is to import the base Pressable directly from React Native though.
@jonsherrard is your theme setup properly with the typescript guide? this is expected with a component like Pressable, but I’m surprised it’s happening with text. it works fine for me with text. it could be a TS version thing, or an improperly setup theme.
if you import { Theme } from ‘dripsy’
and then do this, what do see when you hover it?
type Color = keyof Theme[‘colors’]
@jonsherrard it might make sense for you to open a separate issue, since i wouldn't expect this from Text
it might be as simple as
styled
omittingvariant
from the component passed to it.
yeah, this was my expectation here (along with variants
prop) 🙏
thanks for taking a look!
This should be fixed in 3.7.3
. Thanks for your patience here.
amazing, thank you for this ❤️