Nested texts don't seem to inherit parent styles

[dnlgrgly]

I stumbled upon an issue where creating nexted Texts don't work like they do in React-Native. Eg. this snippet:

import {Text} from 'dripsy';

...

<Text sx={{color: '$neutral/10'}}>
  Demo 1
  <Text>Demo 2</Text>
</Text>

Results in this:

Whereas if I were to use the Text component coming from react-native, like this:

import {Text} from 'react-native';

...

<Text style={{color: 'white'}}>
  Demo 1
  <Text>Demo 2</Text>
</Text>

It would work as I'd expect:

[nandorojo]

Hey, so they should inherit, however, they might be getting overridden by theme.text.body, is that possible?

[nandorojo]

Or if you have text in your theme.colors, I believe this would override it

[dnlgrgly]

I only have fontSize, lineHeight and fontWeight set in my theme.text.body; and I also don't have any key called text in the colors, only very color-y names like $yellow/90 and so. :D

But even then, I think the color coming from the parent component should take precedence instead of the ones in the theme, as the default theme values have been overwritten by it 🤔

[nandorojo]

But even then, I think the color coming from the parent component should take precedence instead of the ones in the theme, as the default theme values have been overwritten by it 🤔

I agree, it would just require adding an additional react context which would add some decent performance overhead…unfortunately RN doesn’t have easy APIs for controlling inheritance the way CSS does.

That said, if the color is unset everywhere, it should inherit. There’s nowhere you’re setting color then, right?

[dnlgrgly]

Ah, I understand. Yes, I indeed don't set the color for the child anywhere.

[nandorojo]

In that case, I'm not totally sure what's going on. Can you try:

1. Use a normal Text from react-native for the child
2. Do the same but for the parent instead
3. And lastly, do normal RN text for both parent and child

And compare what happens?