Javascript 以编程方式设置元素样式

大家好，我有一个元素，我想有条件地应用多种样式

起初，我是这样做的：

    <Text
        style={[
          discountCodeState === '' || !isActiveHandler(value)
            ? [
                style.submitText,
                isActiveHandler(value) ? style.submitTextActive : null,
              ]
            : discountCodeState === 'success'
            ? [style.submitText, style.submitTextSuccess]
            : [style.submitText, style.submitTextError],
        ]}
      >
        {submitText}
      </Text>

这工作正常，但有大量冗余代码，因此我将其重构为：

   <Text
        style={[
          style.submitText,
          discountCodeState === '' && isActiveHandler(value)
            ? style.submitTextActive :
             discountCodeState === 'success'
            ?  style.submitTextSuccess
            :  style.submitTextError,
        ]}
      >
        {submitText}
      </Text>

但是由于某种原因，style.submitText不知怎么地丢失了，我不知道为什么

---

谢谢

Style.submitText和其他3种样式中存在的样式字段将被其他3种样式覆盖。 在样式数组中放置相同的样式文件时，最后一个字段将被覆盖

例如：

const styles=StyleSheet.create({
  style1: {
    backgroundColor:'blue',
    width:'100%',
    height:'50%',
    ...
  },
  style2: {
    backgroundColor:'red',
    width:'50%',
    ...
  },
  style3: {
    backgroundColor:'green',
   ...
  },
});

<View style={[styles.style1, styles.style2, styles.style3]}/>

在第一个逻辑中，当应用style.submitText时，它后面只跟style.submittexactive或null，但是在第二个逻辑中，您首先添加style.submitText，然后执行一些逻辑来应用其他样式，我怀疑这些样式会覆盖style.submitText

{
    backgroundColor:'green',
    width:'50%',
    height:'50%',
}