Pseudo props: Do’s & Dont’s

In versions before 3.2.0 there was a set order in which pseudo props can be nested, but it had some learning curve so we have simplified it. Pseudo props can now be nested in any combination with one small thing to keep in mind.

Example: Let us assume you want to change the text color of a button on its hover state.

Do's

Copy
<Button
  _hover={{
    _text: { color: 'secondary.400' },
  }}
>
  Change My Color
</Button>

Dont's

Copy
<Button
  _text={{
    _hover: { color: 'secondary.400' },
  }}
>
  Change My Color
</Button>

The above thing translates to a Text(not Button) when hovered changes its color to secondary.400 .

Precedence Order for Pseudo Props:

Now all the pseudo props follow a specific order that defines which pseudo prop can override the other pseudo prop. You can find the precedence values associated with each pseudo prop. Higher number means higher precedence.

Pseudo Props

Precedence Value

_disabled

100

_pressed

_hover

_focus

_focusVisible

_readOnly

_invalid

_active

_checked

_web

_android

_ios

_light

_dark


Playground
function Component() {
  return (// Here you can see _hover will be overrided by _pressed
    <Button _hover={{
      bg: 'red.500'
    }} _pressed={{
      bg: 'green.500'
    }}>
      Press and Hover here
    </Button>
  );
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}function Component() {
  return (// Here you can see _hover will be overrided by _pressed
    <Button _hover={{
      bg: 'red.500'
    }} _pressed={{
      bg: 'green.500'
    }}>
      Press and Hover here
    </Button>
  );
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}

Understanding _icon:

There are different ways in which you can add start and end icon in button.

Do's

In below approach icon is passed as startIcon prop and it’s styling is added into _icon pseudo prop.


Playground
function Component() {
  return <Button startIcon={<Icon as={Ionicons} name="cloud-upload-outline" size="sm" />} _icon={{
    color: 'coolGray.300'
  }} _text={{
    color: 'coolGray.300'
  }} _hover={{
    _icon: {
      color: 'coolGray.50'
    },
    _text: {
      color: 'coolGray.50'
    }
  }}>
      Upload
    </Button>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}function Component() {
  return <Button startIcon={<Icon as={Ionicons} name="cloud-upload-outline" size="sm" />} _icon={{
    color: 'coolGray.300'
  }} _text={{
    color: 'coolGray.300'
  }} _hover={{
    _icon: {
      color: 'coolGray.50'
    },
    _text: {
      color: 'coolGray.50'
    }
  }}>
      Upload
    </Button>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}

Don'ts

The below approach is similar to the above one, but this time we have passed inline color in Icon. So, if you pass styling in Icon itself and then also pass it in _icon, then styling passed in _icon will not be applied because the props passed in Icon should have higher specificity than _icon and that will prevent Icon to override props from _icon.

In below case color from _icon will not be applied to Icon and you will not be able to change the color of Icon on state changes like hover, pressed and focus.


Playground
function Component() {
  return <Button startIcon={<Icon as={Ionicons} name="cloud-upload-outline" size="sm" color="amber.500" />} _icon={{
    color: 'coolGray.300'
  }} _text={{
    color: 'coolGray.300'
  }} _hover={{
    _icon: {
      color: 'coolGray.50'
    },
    _text: {
      color: 'coolGray.50'
    }
  }}>
      Upload
    </Button>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}function Component() {
  return <Button startIcon={<Icon as={Ionicons} name="cloud-upload-outline" size="sm" color="amber.500" />} _icon={{
    color: 'coolGray.300'
  }} _text={{
    color: 'coolGray.300'
  }} _hover={{
    _icon: {
      color: 'coolGray.50'
    },
    _text: {
      color: 'coolGray.50'
    }
  }}>
      Upload
    </Button>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <Component />
      </Center>
    </NativeBaseProvider>;
}

Pseudo Props: Overview

Internal Pseudo Props

Quick Nav

Nesting pseudo props:

Do's

Dont's

Precedence Order for Pseudo Props:

Pseudo props: Do’s & Dont’s | NativeBase | Universal Components for React and React Native