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

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

Answer 2

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'
}
}
}
}
}
}
});