'External CSS style is not applying if inline CSS is added

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.

htmlcssreact-nativeexpo


Solution 1:[1]

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.

Solution 2:[2]

Try it

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Connor Mooneyhan
Solution 2 ??????

Related Questions