Why can't I get any autocomplete from Text Component ?
ppJuan opened this issue · comments
SAME CODE from the example.
but I can't get any autocomplete from Text Component. It is expected to have a props list with 'variant'. Very appreciate for anyone's helping!
import {
ThemeProvider,
createBox,
createText,
createRestyleComponent,
createVariant,
VariantProps,
} from '@shopify/restyle';
// See the "Defining Your Theme" readme section below
import theme, { Theme } from './styles/theme';
const Box = createBox<Theme>();
const Text = createText<Theme>();
const Card = createRestyleComponent<
VariantProps<Theme, 'cardVariants'> & React.ComponentProps<typeof Box>,
Theme
>([createVariant({ themeKey: 'cardVariants' })], Box);
const Welcome = () => {
return (
<Box
flex={1}
backgroundColor="mainBackground"
paddingVertical="xl"
paddingHorizontal="m">
<Text variant="header">Welcome</Text>
<Box
flexDirection={{
phone: 'column',
tablet: 'row',
}}
>
<Card margin="s" variant="secondary">
<Text variant="body">This is a simple example</Text>
</Card>
<Card margin="s" variant="primary">
<Text variant="body">Displaying how to use Restyle</Text>
</Card>
</Box>
</Box>
);
};
export default () => {
return (
<ThemeProvider theme={theme}>
<Welcome />
</ThemeProvider>
);
};
import { createTheme } from '@shopify/restyle'
const palette = {
purpleLight: '#8C6FF7',
purplePrimary: '#5A31F4',
purpleDark: '#3F22AB',
greenLight: '#56DCBA',
greenPrimary: '#0ECD9D',
greenDark: '#0A906E',
black: '#0B0B0B',
white: '#F0F2F3',
}
const theme = createTheme({
colors: {
mainBackground: 'red',
cardPrimaryBackground: 'yellow',
},
spacing: {
s: 8,
m: 16,
l: 24,
xl: 40,
},
breakpoints: {
phone: 0,
tablet: 768,
},
textVariants: {
body: {
color: 'cardPrimaryBackground'
},
header: {
color: 'cardPrimaryBackground'
}
},
hhhh: 1
})
export type Theme = typeof theme
export default theme
Your code should work, check this snack for reference
Hey @ppJuan
If your problem is solved can you please close the issue?
It sparks joy for maintainers ✨