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
 />

Answer 1

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