CODEWITHSUNDEEP
react-native
jason chen
jason chen

Reputation: 872

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

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.

Upvotes: 24

Views: 25578

Answers (2)

AmerllicA
AmerllicA

Reputation: 32522

You can pass style props to your component and use an array inside your View element style props. But if the style props that come from props be an array, react native style props for elements cannot handle it. So use below function as a util:

exprot const styleJoiner = (...arg) => arg.flat(9).filter(a => a); // 9import is{ aStyleSheet custom} depthfrom number'react-native';

Now write your component like below:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { styleJoiner } from 'utils';

export default (props)=> (
    <View style={styleJoiner(styles.container, props.style)}>
        ~~~
    </View>
);

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

It is safe to work.

Upvotes: 0

d-vine
d-vine

Reputation: 5547

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'
  },
});

Upvotes: 43

Related Questions