React Native中如何修改rn-material-ui-textfield的OutlinedTextField样式？

要实现无灰色轮廓+圆角的样式，需要利用组件专门的轮廓相关属性，而非仅通过inputContainerStyle或containerStyle调整。以下是修改后的代码：

<OutlinedTextField
    secureTextEntry={secureTextEntry ? isHidden : false}
    ref={textFieldRef}
    inputContainerStyle={[styles.textInput, hasError && styles.errorInput]}
    containerStyle={{height: 56}}
    labelTextStyle={styles.labelStyle}
    onChangeText={handleChange}
    onBlur={() => {
      setFieldTouched(name);
      onBlur(name);
    }}
    {...inputProps}
    label={
      <Text>
        {label}
        {required && (
          <>
            &nbsp;
            <Text style={styles.requiredStar}>*</Text>
          </>
        )}
      </Text>
    }
    errorColor={'red'}
    error={hasError}
    // 新增属性修改轮廓样式
    inactiveOutlineColor="transparent" // 去除未聚焦时的灰色轮廓
    activeOutlineColor="#1a73e8" // 聚焦时的边框颜色（可改为透明或自定义颜色）
    outlineStyle={{ borderRadius: 8 }} // 设置轮廓圆角
  />

const styles = StyleSheet.create({
     textInput: {
     width: '100%',
     backgroundColor: 'white',
     padding: 0,
     margin: 0,
     // 移除此处borderRadius，改为通过outlineStyle控制
},
})

关键说明： #

• inactiveOutlineColor：直接控制未激活状态下的轮廓颜色，设为透明即可去掉默认灰色边框
• outlineStyle：组件专门用于修改轮廓的样式属性，此处设置borderRadius即可实现圆角效果
• 若希望聚焦时也无边框，将activeOutlineColor同样设为transparent即可
• 原inputContainerStyle中的borderRadius可移除，因为轮廓圆角由outlineStyle控制

内容的提问来源于stack exchange，提问作者Amine