How should I customize button text color?

[localjo]

I'm wondering the correct way to customize button text color. I would expect that I can do something like this:

<Button bg-primary _white>Label</Button>

But the text color won't change in this case. The simplest working alternative I can find is:

<Button bg-primary style={{color: Colors._white}}>Label</Button>

While this particular example is simple, I am struggling to figure out the correct way to create reusable component variations. I'm building an app that has 5 different button styles, and each one requires 6 or 7 custom style attributes to be applied. Spelling out the whole styles object every time is quite verbose and will get difficult to maintain.

I've also tried using the theme manager:

  ThemeManager.setComponentTheme('Button', (props, context) => {
    if (props.mystyle) {
      return {
        backgroundColor: Colors.green10,
        borderColor: Colors.red10,
        borderWidth: 2,
        borderStyle: 'solid'
        color: Colors._white,
        
      }
    }
    return {
      backgroundColor: Colors.red10,
    };
  });

<Button mystyle>Label</Button>

But only the backgroundColor seems to be applied. I think I must be doing something wrong. I can't imagine that it's impossible to modify something as simple as the text color on a button without resorting to inline style props.

[ethanshar]

Hi, using ThemeManager for this seems like the right solution for you.
Notice that there are two APIs
ThemeManager.setComponentTheme
ThemeManager.setComponentForcedTheme

The first, sets default props for the component that can be overridden by the instance.
The latter, force props no matter what is being passed on a specific button instance.

[localjo]

As you can see in my example, I am using setComponentTheme and the instance is simply <Button mystyle>Label</Button>, there is nothing that should be overridden.