Shopify / restyle

A type-enforced system for building UI components in React Native with TypeScript.

Home Page:https://shopify.github.io/restyle/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Question] How to inherit parent style?

horstleung opened this issue · comments

Let's say we have a Text component and a Card component

<Card>
     <Text variant="body"/> 
<Card />

The body variant has a color: 'black' style.

What is the restyle way to do if we want to have a inverted card variant?

<Card variant="inverted">
     <Text variant="body"/> 
<Card />


// theme
cardVariants: {
    defaults: {
      backgroundColor: 'cardPrimaryBackground',
    },
    inverted: {
      backgroundColor: 'mainForeground',
      color: 'white' // <-- how to make the children text follow this color?
    }
  },

Hi, this is unrelated to shopify/restyle, this is about how react-native works, see https://reactnative.dev/docs/text#limited-style-inheritance

Hi, this is unrelated to shopify/restyle, this is about how react-native works, see https://reactnative.dev/docs/text#limited-style-inheritance

Thx for your reply. So, that means I need to do a switch to get new props for the Text component, right?
Is there a smarter way to map it?