1

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.

enter image description here

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:

enter image description here

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.

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"/>
  }
}
  • Thanks. why I didn't notice such a simple way!! – mitsuruog Mar 28 at 1:17
  • @mitsuruog if this is the answer you expected, please considerer marking it as accepted – Vencovsky Mar 28 at 11:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.