`createText` component ignores default styles when no variant used
jackbot opened this issue · comments
I've hunted around in the issues but I can't seem to figure out if I'm missing something obvious here.
It seems like the component created with createText
will only use the defaults
from the theme if a variant
prop is used.
import React from "react";
import { View } from "react-native";
import { createTheme, ThemeProvider } from "@shopify/restyle";
import { createText } from "@shopify/restyle";
const palette = {
purple: "#8C6FF7",
};
const theme = createTheme({
colors: {
textPurple: palette.purple,
},
spacing: {
s: 8,
},
breakpoints: {},
textVariants: {
defaults: {
color: "textPurple",
},
h1: {
fontSize: 30,
},
},
});
type Theme = typeof theme;
const Text = createText<Theme>();
export default function App() {
return (
<ThemeProvider theme={theme}>
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>I would expect this text to be purple, but it's black</Text>
<Text variant="h1">
This text is purple and font size 30 as expected
</Text>
</View>
</ThemeProvider>
);
}
Am I missing something here?
Fixed by #148 in v2.1.0
Hello. The fix is not correct. Now If I dont specify variant (which not necessary according to TS definition, see the screenshot)
It throws 2 different errors:
- when no
textVariants
specified:
So, my suggestion is either set variant
as required prop in the component or just do not add variant prop when it's not set.
Or 3d option: document that issue in text section. I have wasted 1h trying to solve the problem with digging into the source.
So @sbalay pls reopen the issue
Please reopen the issue