如何使用图标更改 TextInputs 中的背景颜色？

Question

我有一个带有右图标的 react-native-paper TextInput，我想更改背景颜色，但图标后面的背景没有改变。

似乎在 TextInput 后面有一层，所以当更改 TextInput 背景并且这个元素覆盖后面的整个层时没有问题，但是当添加图标（左或右）时，图标会稍微推动 TextInput 元素到侧面显示下层的一部分，该部分具有我要删除的背景颜色。

在这张图片中你可以看到两个 TextInputs，我都添加了 backgroundColor 属性使它们变成白色，但是下面那个右边有一个图标，图标后面是原始的 TextInput 背景色。

使图标背景颜色为白色如下所示：

我已经尝试使用主题、样式和背景颜色道具更改背景，但到目前为止没有任何效果。

有没有办法去除紫色背景（或使其变白）？

这是我的代码现在的样子：

        <TextInput
      style={styles.input}
      mode="flat"
      autoCapitalize="none"
      secureTextEntry={showPassword ? false : true}
      label="Contraseña"
      value={password}
      backgroundColor="white"
      onChangeText={value => setPassword(value)}
      textColor="black"
      underlineColor="rgb(102,102, 102)"
      activeUnderlineColor="rgb(102,102, 102)"
      right={
        <TextInput.Icon
          icon={showPassword ? 'eye' : 'eye-off'}
          size={25}
          onPress={() => setShowPassword(!showPassword)}
          style={styles.eyeIcon}
        />
      }
    />

Answer 1

我解决了这个问题，在 surfaceVariant 属性中添加主题属性和更改颜色，就像这样

<TextInput
          style={styles.input}
          mode="flat"
          autoCapitalize="none"
          secureTextEntry={showPassword ? false : true}
          label="Contraseña"
          value={password}
          onChangeText={value => setPassword(value)}
          textColor="black"
          underlineColor="rgb(102,102, 102)"
          activeUnderlineColor="rgb(102,102, 102)"
          theme={{
            ...DefaultTheme,
            colors: {
              surfaceVariant: 'white',
            },
          }}
          right={
            <TextInput.Icon
              icon={showPassword ? 'eye' : 'eye-off'}
              size={25}
              onPress={() => setShowPassword(!showPassword)}
              style={styles.eyeIcon}
            />
          }
        />