Revision history [back]

To alter the outline/border of a disabled OutlinedInput in MUI, you can use the MuiOutlinedInput-notchedOutline class and apply custom styling to it via CSS. You can use the border property to change the border style, color, and width. Here's an example:

import { withStyles } from '@material-ui/core/styles';
import OutlinedInput from '@material-ui/core/OutlinedInput';

const StyledOutlinedInput = withStyles(theme => ({
  notchedOutline: {
    borderColor: theme.palette.grey[400], // Change the border color
    borderWidth: 2, // Change the border width
    borderStyle: 'dashed', // Change the border style
  },
}))(OutlinedInput);

<StyledOutlinedInput disabled />

In this example, we're creating a new StyledOutlinedInput component that applies custom styling to the notchedOutline class. We're using the theme object to access the palette.grey property for the border color. We're also changing the border width and style to 2 and dashed, respectively. Finally, we're passing the disabled prop to the StyledOutlinedInput component to render a disabled input with the custom border styling.