Override Global Objects Styles

[deadcoder0904]

Sometimes we need to Override Global Styles at only one place & rest must apply default styles.

For example -

Default config -

// build file
EStyleSheet.build({
     $Button: {
         backgroundColor: 'orange',
         color: 'white'
    }
})

// button component with `white text` & `orange background`
EStyleSheet.create({
     button: () => EStyleSheet.value('$Button')
})

Proposed config -

// button component with `black text` & `orange background`
EStyleSheet.create({
     button: () => {
        ...EStyleSheet.value('$Button'),
          color: 'black'
        }
})

[vitalets]

What do you think about more "css" approach - use composition of styles instead of override?

// global.js
export default EStyleSheet.create({
     button: {
         backgroundColor: 'orange',
         color: 'white'
    }
})

// black-button.js
import globalStyles from './global';

const styles = EStyleSheet.create({
     button: {
        color: 'black'
     }
});

class BlackButton extends React.Component {
  render() {
    return (
      <View style={[globalStyles.button, styles.button]}>
          ...
      </View>
    );
  }
}  

[deadcoder0904]

Yep, that can be great too. Idk why I always go the hard way 😂

[vitalets]

Idk why I always go the hard way

It's the best way to learn new things! ;)

[pistou]

I prefer using this approach, as I don't have to import a globalStyle file when I need them (since they're available from the Theme):

// Theme file
EStyleSheet.build({
     $Button: {
         backgroundColor: 'orange',
         color: 'white'
    }
})

// Component file
EStyleSheet.create({
    button: () => ({
        ...EStyleSheet.value('$Button'),
        color: 'red', // this overrides the default Button's color
    }),
})