How to avoid updating clear/outline button styles from changing themes

Question

Consider such a simple page that uses Button from [email protected]:

class App extends React.Component {
  render() {
    const theme = {
     // Use default
    };
    return (
      <ThemeProvider theme={theme}>
        <View style={styles.container}>
          <Button title="normal"/>
          <Button title="clear" type="clear"/>
          <Button title="outline" type="outline"/>
        </View>
      </ThemeProvider>
    )
  }
}

Initially, it looks something like this.

Then, I am going to set my custom theme here.

class App extends React.Component {
  render() {
    const theme = {
      Button: {
        buttonStyle: {
          backgroundColor: 'green',
        },
      },
    };
    ...
  }
}

This result is:

I want to keep background styles for clear/outline type, though. but that theme system seems doesn't allow such customize.

Does anyone know how can I avoid that issue with using the theme system? or any workaround.

Thanks.

Answer 1

You can create the theme with all the properties you want and than use spread operator to add the theme only to the buttons you want.

class App extends React.Component {
  render() {
    const theme = {
        buttonStyle: {
          backgroundColor: 'green',
        },
    };
    ...
    <Button title="normal" {...theme}/>
    <Button title="clear" type="clear"/>
    <Button title="outline" type="outline"/>
  }
}

Answer 2

The only way I was able to achieve this is to add buttonStyle to the specific clear Buttons that I didn't want the styles applied to.

const theme = {
    Button: {
      buttonStyle: { backgroundColor: primaryColor },
    },
  };

<ThemeProvider theme={theme}>
{your app}
</ThemeProvider>

...

<Button
  type='clear'
  buttonStyle={{ backgroundColor: undefined }}
  titleStyle={{ color: primaryColor }}>
</Button>

I ended making my own component that wrapped the Clear Button from react-native-elements in order to only have to make this change once.