Menu
This is a part of a _renderRow-function. I have some basic styles for a button, and also a style that is read from a variable on the row. In this example it's '#f00' but it could be a variable, like thisColor. How can I combine an external style with an inline style?
Something like this, but this doesn't work:
<TouchableHighlight style={[styles.button]{ backgroundColor: '#f00'}}
Or do I have to nest it with a container inside the TouchableHightlight and put the inline style on that element instead?
642
import { StyleSheet } from 'react-native'; const styleJoiner = (... arg) => StyleSheet. flatten(arg); By using my styleJoiner anywhere you can combine any type of style and combine styles.
Obviously inline styles work at the same time with external style classes.
Use the spread syntax to combine multiple inline style objects in React, e.g. style={{...style1, ... style2}} . The spread syntax will unpack the key-value pairs of the objects into a final object and the styles will get applied to the element.
Disadvantages of Inline CSS:Adding CSS rules to every HTML element is time-consuming and makes your HTML structure messy. Styling multiple elements can affect your page's size and download time.
Your brackets are wrong. If you intend to continue to use the array syntax, Use this instead:
<TouchableHighlight style={[styles.button,{ backgroundColor: '#f00'}]}
Can use the spread syntax:
<TouchableHighlight style={{ ...styles.button, backgroundColor: '#f00'}}
This is the correct answer, tested in React Native 0.44.2:
<TouchableHighlight style={{...styles.button, ...{backgroundColor: '#f00'}}}>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
