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.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2022-01-13 11:00:00 +0000
Seen: 11 times
Last updated: Feb 10 '23
How to give an <svg> element a double border using CSS when there is no style attribute present?
What is the method to eliminate the default table border in Mantine?
What is the method for applying a bottom border exclusively in Jetpack Compose?
What is the process for eliminating the additional border in QTabBar?
How can I modify the border color of a checkbox input using CSS?