如何在 Input 组件的 inputContainerStyle 中将 backgroundColor 作为道具传递给本机元素

Question

               const AppInput = (_props: InputProps) => {

                  return(
                         <Input
                         labelStyle={styles.labelStyle}
                         inputContainerStyle={[
                         styles.inputContainerStyle,
                         {
                          borderColor: _props.placeholderTextColor,
                          borderWidth: isFocus ? 1 : 0,
                          borderBottomWidth: isFocus ? 1 : 0,
                          backgroundColor: Props.backgroundColor, //in this line i want to 
                                                        pass props from parents component

                          },
                          ]}
                          inputStyle={styles.inputStyle}

                         autoCompleteType="phone"
                         {..._props}
                         errorStyle={styles.errorStyle}
                         onFocus={() => onFocus(true)}
                         onBlur={onBlur}
                         />
                      )
                    }

Through parents components

                       <AppInput
                      placeholder={
                      isExculde ? "Don't show recipes with..." : 'Prefer recipes with...'
                       }
                        placeholderTextColor={ isExculde ? colors.icon.danger : 
                          colors.inputSetting.success
                         }
                         keyboardType="default"
                      rightIcon={
                         <Icon
                         name="search"
                         size={24}
                         color={
                             isExculde ? colors.icon.danger : colors.inputSetting.success
                               }
                        tvParallaxProperties={undefined}
                         containerStyle={{right: 8}}
                         />
                          }
                       onChangeText={e => setShowExcludeList()}
    
                      inputContainerStyle={{backgroundColor:"red"}}
                      />

when i pass inputContainerStyle from parent comp.net its override the default style from Input component, i just want to pass backgroundcolor but not override default styles.

Right now its look like this: https://ibb.co/GpTgDpt But i want to look like this: https://ibb.co/SfJrQ4H

Answer 1

       const AppInput = (props) => {
       const {inputContainerStyle} = props;

          return(
                 <Input
                 labelStyle={styles.labelStyle}
                 inputContainerStyle={{
                 ...styles.inputContainerStyle,
                 ...inputContainerStyle,
                  }}
                  inputStyle={styles.inputStyle}

                 autoCompleteType="phone"
                 {..._props}
                 errorStyle={styles.errorStyle}
                 onFocus={() => onFocus(true)}
                 onBlur={onBlur}
                 />
              )
            }

Now in your parent component send backgroudColor and other style props in inputStyle prop.