如何为禁用的 Material UI TextField 覆盖全局边框颜色 styles？

Question

I'm trying to override the global style for the Mui TextField components that are disabled, but I can't get the border color to change.

I've managed to change the label color if the field is disabled, but not the border color. Here is what I have so far:

export const theme = createMuiTheme({
  overrides: {
    // For label
    MuiInputLabel: {
      root: {
        '&$disabled': {
          color: '#000000',
        },
      },
    },
    // For border color of field (doesn't work)
    MuiTextField: {
      root: {
        '&$disabled': {
          borderColor: '#FFFFFF'
        },
      },
    },
  },
});

I've tried all kinds of variations, including,

    MuiOutlinedInput: {
      root: {
        fieldset: {
          borderColor: '#FFFFFF',
        },
      }
    }

But this only changes the border color of non-disabled fields. What am I doing wrong here? Here is how it looks:

Answer 1

The border is getting from the fieldset element. You can style if based on your needs:

MuiInputBase: {
  root: {
    "&$disabled": {
      '& fieldset.MuiOutlinedInput-notchedOutline': {
        borderColor: "blue",
        background: "grey"
      }
    }
  }
}

You can find a working example here: https://codesandbox.io/s/material-styling-disabled-textfield-ckp14?file=/demo.js

Here is a "walkthrough" for how to do it yourself:

1. Check the html output:
2. Open the image in new tab to check the marks.
   As you can see - the label is actually not a parent of the fieldset tag, which is the one that draws the border.
3. The fieldset is inside the div.MuiInputBase , which is also disabled, so I had to add the &$disabled on the root of the MuiInputBase .
4. As for the & fieldset - the fieldset element is a child-element fo the MuiInputBase - so the space between the & and the tag-name means this is a child-element.
5. The fieldset element has the MuiOutlinedInput-notchedOutline so I used it as the relevant selector. You could probably just use .MuiOutlinedInput-root.Mui-disabled fieldset without the last-selector. Try it:-).