react-native: how to override the default style defined in a component

Question

Let's say I want to use a Component with below defined style:

var styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff'
  },
});

Can I override the base style with mine like this?

<Component style={backgroundColor: 'transparent'}></Component>

It didn't work for me, so wonder if this depends on if the Component supports the behavior.

Answer 1

The description is a bit vague. Is it a component you wrote your self? Assuming this it should work like this:

export default React.createClass({
  render: function(){
    return(<View style={[ styles.container, this.props.style ]}>...</View>
  }
})

var styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff'
  },
});