I want to override some sub-component of style in react native.like - I have created an style CircleShapeView
const styles = StyleSheet.create({
CircleShapeView: {
width: 50,
height: 50,
borderRadius: 50/2,
backgroundColor: '#000'
},
});
I want change backgroundColor
,when i am usins this style. some thing like this.
<Image
style={backgroundColor: "#fff", styles.CircleShapeView}
...
/>
What is right way to do it?
To override the backgroundColor, you could just do this:
<Image
style={[ styles.CircleShapeView, { backgroundColor: "#fff" } ]}
...
/>
A more flexible way of overriding style would be to pass an additional style prop to your subcomponent.
You would call your subcomponent like that:
<Subcomponent passedStyle={{ backgroundColor: '#fff' }} />
Apply passed style to your image:
<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}
...
/>
To add to the other answers here, make sure that you are specifying the inherited props style AFTER the style on the component you are trying to override.
Example: Do this:
<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}
...
/>
Not this:
<Image
style={[ this.props.passedStyle, styles.CircleShapeView ]}
...
/>
The second example will NOT override the style on the component.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.