Variant for multi-elements

Author: dittmarconsultingCreated Jul 24, 2022Updated Jul 24, 2022

Labelsquestion

Hi all,

First of all, thank you for the great lib.

I have a question about applying a variant for multi-elements like this:

javascript

import styled from "styled-components/native"
import { variant } from "styled-system"
import { View, Text, ActivityIndicator } from "react-native"

const BaseButton = ({ isLoading }) => (
  <View style={{ flexDirection="row" }}>
    <Text>Foo</Text>
    { isLoading && <ActivityIndicator />
  </View>
)

const Button = styled(BaseButton)(
  variant({
    variants: {
      primary: {
        backgroundColor: "blue",
      },
    },
  })
)

In this example, my View will get a blue background when I apply the variant primary but how can I set the Text color and the color for the ActivityIndicator?

Is that somehow possible?

Thank you in advance.

Source: styled-system/styled-system

View original on GitHub View discussion on GitHub