External CSS style is not applying if inline CSS is added-CodePudding

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.

CodePudding user response：

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]}

CodePudding user response：

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.

CodePudding user response：

Try it

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