如果添加内联 CSS，则外部 CSS 样式不适用

Question

如果我同时编写内联和外部 CSS 样式，则外部 CSS 样式表不适用。

我的样式表：

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

下面是出现问题的代码。只有 color:'#ED9780' 有效。如果我添加内联 {color:'#ED9780'}，则上面的样式表根本不适用。仅当我删除 {textAlign: 'center',color:'#ED9780'}

括号中的内联样式时，才会应用样式表

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

为什么会这样？任何帮助将不胜感激。

Answer 1

通常，出于这个原因，内联样式将被用作最后的手段。如果在内联 style 属性中指定了规则，则它优先于可能在其他地方应用的所有其他样式，除非使用 !important 关键字。您可以阅读有关 !important here 的更多信息，但您应该（几乎）不惜一切代价避免使用它。

Answer 2

试一试

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

Answer 3

要在 Expo (React Native) 中组合（多个）内联和样式表引用，您需要在数组中提供它们，例如：

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

工作零食：https://snack.expo.dev/Coo98ohRQ

来源：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]}

如果添加内联 CSS，则外部 CSS 样式不适用

External CSS style is not applying if inline CSS is added

html

css

react-native

expo