如何修改react-native-paper中TextInput错误状态（error={true}）的颜色？

I’ve faced this exact frustration before—react-native-paper’s docs don’t explicitly document how to tweak the error color for TextInput when error={true}, but there are a few solid workarounds that get the job done. Here’s what I recommend:

1. Inline Conditional Styling (Quick Fix) #

If you only need to adjust the error style for a single TextInput, you can pass conditional styles directly to the component. This targets the input text, underline/border, and even the error message text via a mini theme override:

import { TextInput } from 'react-native-paper';

function MyFormInput({ error, ...props }) {
  return (
    <TextInput
      error={error}
      // Customize input text and underline color on error
      style={{
        color: error ? '#ff3b30' : undefined, // Red input text when error
        borderBottomColor: error ? '#ff3b30' : undefined, // Red underline
      }}
      // Override the default error message color
      theme={{ colors: { error: '#ff3b30' } }}
      {...props}
    />
  );
}

Note: For outlined variants, replace borderBottomColor with borderColor to target the full border.

2. Global Theme Extension (App-Wide Consistency) #

To set a custom error color for all TextInputs in your app, extend react-native-paper’s default theme and override the TextInput component styles. This ensures consistency across your entire app:

import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';

const customTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    error: '#ff3b30', // Sets default error text color globally
  },
  components: {
    TextInput: {
      styles: {
        // Customize the root container (underline/border)
        root: ({ theme, error }) => ({
          ...theme.components.TextInput.styles.root,
          borderBottomColor: error ? '#ff3b30' : theme.colors.primary,
        }),
        // Customize the input text itself
        input: ({ theme, error }) => ({
          ...theme.components.TextInput.styles.input,
          color: error ? '#ff3b30' : theme.colors.text,
        }),
      },
    },
  },
};

// Wrap your app with the custom theme
export default function App() {
  return (
    <PaperProvider theme={customTheme}>
      {/* Your app screens/components go here */}
    </PaperProvider>
  );
}

3. Fully Custom Wrapper Component (Maximum Control) #

If you need complete control over the error state (like custom error message positioning or styling), build a wrapper component that wraps react-native-paper’s TextInput and adds your own error UI:

import { TextInput as PaperTextInput, Text } from 'react-native-paper';
import { View, StyleSheet } from 'react-native';

function CustomTextInput({ error, errorMessage, ...props }) {
  return (
    <View style={styles.container}>
      <PaperTextInput
        error={!!error}
        style={[styles.input, error && styles.inputError]}
        {...props}
      />
      {/* Custom error message */}
      {error && errorMessage && (
        <Text style={styles.errorText}>{errorMessage}</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
  input: {
    backgroundColor: 'transparent',
  },
  inputError: {
    borderBottomColor: '#ff3b30',
    color: '#ff3b30',
  },
  errorText: {
    color: '#ff3b30',
    fontSize: 12,
    marginTop: 4,
    marginLeft: 4,
  },
});

export default CustomTextInput;

Pro Tip #

Always test with your TextInput variant (underline, outlined, flat) since each uses different style properties. For outlined inputs, target borderColor instead of borderBottomColor to adjust the full border’s error color.

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