Change the borderBottom styling of the TextField, when disabled, to 'none'?

Question

Within a datacell, I wasn't able to find out how to stack text. So I created a textfield, gave it value and gave it helper text and disabled the textfield and changed the text color to black when disabled. I've been trying to figure out how to change the bottomBorder to 'none' (which is what I assume is what is being used to create the dashed line under the input value text). This is what I have so far.

const DarkerDisabledTextField = withStyles({
    root: {
        marginRight: 8,
        "& .MuiInputBase-root.Mui-disabled": {
            color: 'black',
            fontSize: '16px',
            borderBottom: 'none',

        }
    },
    underline: {
        "& .MuiInputBase-root.MuiInput-outlined": {

            borderBottom: 'none',

        }
    }
})(TextField);

This is what I used to create and style my textfield. The underline key isn't working how I have read that it should.

And this is what I have tried so far with my textfield

<DarkerDisabledTextField
    title={params.data.name}
    disabled
    defaultValue={params.data.name}
    helperText={title}
    fullWidth
 />

Does this answer your question? [How can I remove the underline of TextField from Material-UI?](https://stackoverflow.com/questions/57914368/how-can-i-remove-the-underline-of-textfield-from-material-ui) — jeiea, Nov 14 '20 at 20:50

jeiea · Accepted Answer · 2020-11-14T21:09:23.550

3

I suggest prop solution.

<DarkerDisabledTextField
  helperText="helper text"
  disabled={isDisabled}
  InputProps={isDisabled ? { disableUnderline: true } : {}}
/>

If you prefer withStyles way, check :before

const DarkerDisabledTextField = withStyles({
  root: {
    marginRight: 8,
    "& .MuiInputBase-root.Mui-disabled:before": {
      color: "black",
      fontSize: "16px",
      borderBottom: "none"
    }
  }
})(TextField);

Applied codesandbox

edited Nov 14 '20 at 21:09

answered Nov 14 '20 at 20:45

jeiea

1,965
14
24

I should have mentioned that I have tried using ```inputProps={disableUnderline: true}``` and still didn't work. I'll edit my original post. Thanks for the help – ZimZimma Nov 14 '20 at 20:59
@ZimZimma That prop is case sensitive. If it doesn't apply, then something may block overriding. That can't be found from question content. I'll add my codesandbox. – jeiea Nov 14 '20 at 21:08
I was wrong, it was because I didn't capitalize the 'I' in 'InputProps'. Both of these solutions work. Thanks you so much kind stranger! – ZimZimma Nov 14 '20 at 21:10
disableUnderline is no longer valid, but the second method works. – Aswin Prasad Sep 30 '22 at 21:35

score 0 · Answer 2 · answered Nov 09 '21 at 14:12

if someone uses the Mui v5 inputs with createTheme, here's what i added to components:

createTheme({
    components: {
        MuiInputBase: {
            styleOverrides: {
                root: {
                    '&.MuiInput-root.Mui-disabled': {
                        ':before': {
                            borderBottomStyle: 'solid'
                        }
                    }
                }
            }
        }
    }
});

Change the borderBottom styling of the TextField, when disabled, to 'none'?

2 Answers2