External CSS style is not applying if inline CSS is added

user_7159134 0
Viewed 83

External CSS stylesheet is not applying if I write inline and External CSS style together.

The Stylesheet I have:

const furStyles = StyleSheet.create({
title_text: {
        fontSize: 46,
        textAlign: 'center',
        fontWeight: 'bold',
      }
})

The below is the code where the problem occurs. Only color:'#ED9780' does work. The Stylesheet above does not apply at all if I add inline which is {color:'#ED9780'}. The stylesheet is applied only if I delete inline styles in the bracket which is {textAlign: 'center',color:'#ED9780'}

<Text style={furStyles.title_text,{color:'#ED9780'}}>BEST</Text>

Why does this happen? Any help would be greatly appreciated.

expo react-native css html
3 Answers

To combine (multiple) inline and stylesheet references in Expo (React Native), you need to provide them in an array, for example:

// Notice that the only change to your code was adding square brackets `[]`
<Text style={[furStyles.title_text,{color:'#ED9780'}]}>BEST</Text>

Working Snack: https://snack.expo.dev/Coo98ohRQ

Source: https://freecontent.manning.com/applying-and-organizing-styles-in-react-native/

It’s also possible to combine the two methodologies; specifying an array of styling properties using inline styles and references to stylesheets:

style={[{color: 'black'}, styles.message]}

user_31804890

Generally, inline styles are to be used as a last resort for this very reason. If a rule is specified in the inline style attribute, it takes precedence over all other styling that may be applied elsewhere, unless the !important keyword is used. You can read more about !important here, but you should avoid using it at (almost) all costs.

user_45929370

Try it

<Text style={{...furStyles.title_text,color:'#ED9780'}}>BEST</Text>
user_158884530
Related