如何在Material-UI v1.0.0-beta.40中修改输入框的错误及边框相关颜色

Got it, let's work through modifying those TextField styles for Material-UI v1.0.0-beta.40. Since this is an older beta release, the styling hooks are a bit specific compared to modern stable versions, but we can handle all your requirements with either component-level custom styles or global theme overrides.

Option 1: Component-Level Customization with withStyles #

This is perfect if you only need to tweak specific TextFields rather than all of them globally. We'll use the withStyles HOC to target the exact states and elements:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import { withStyles } from '@material-ui/core/styles';

const StyledTextField = withStyles({
  root: {
    // Target the TextField when it's in an error state
    '&$error': {
      // Default (unfocused) error border/underline color
      '& .MuiInput-underline:before': {
        borderBottomColor: '#ffcccc', // Your custom error border color
      },
      // Hover state for error border
      '& .MuiInput-underline:hover:before': {
        borderBottomColor: '#ff9999',
      },
      // Focused state error underline color
      '& .MuiInput-underline:after': {
        borderBottomColor: '#ff3333', // Your custom focused error underline color
      },
    },
    // Custom error text color
    '& .MuiFormHelperText-root': {
      color: '#cc0000', // Your custom error text color
    },
    // Optional: Default (non-error) border color
    '& .MuiInput-underline:before': {
      borderBottomColor: '#cccccc',
    },
  },
  // Required to reference the error class in the root styles
  error: {},
})(TextField);

// Usage example
export default function MyForm() {
  return (
    <StyledTextField
      label="Your Input"
      error={true} // Toggle error state
      helperText="This field is required"
      variant="standard" // Works with standard variant; adjust for outlined/filled if needed
    />
  );
}

Key Notes: #

• The $error reference links to the internal Material-UI error class applied when the error prop is true.
• For OutlinedInput variants, replace .MuiInput-underline with .MuiOutlinedInput-notchedOutline and adjust borderColor instead of borderBottomColor.

Option 2: Global Theme Overrides #

If you want these styles to apply to every TextField in your app, override the theme:

import React from 'react';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const customTheme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        // Error state styles
        '&.error:before': {
          borderBottomColor: '#ffcccc',
        },
        '&.error:hover:before': {
          borderBottomColor: '#ff9999',
        },
        '&.error:after': {
          borderBottomColor: '#ff3333',
        },
        // Default (non-error) border color
        '&:before': {
          borderBottomColor: '#cccccc',
        },
      },
    },
    MuiFormHelperText: {
      root: {
        // Error text color
        '&.MuiFormHelperText-error': {
          color: '#cc0000',
        },
      },
    },
  },
});

// Wrap your app with the theme provider
export default function App() {
  return (
    <MuiThemeProvider theme={customTheme}>
      <TextField
        label="Global Styled Input"
        error={true}
        helperText="Global error message"
        variant="standard"
      />
    </MuiThemeProvider>
  );
}

Troubleshooting Tips #

• Double-check class names: Beta versions sometimes have minor class name variations—use your browser's dev tools to inspect the TextField elements and confirm the exact class names applied.
• Make sure you're using the correct variant (standard, outlined, filled) as each has different DOM structures and class names.

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