禁用时将 TextField 的 borderBottom 样式更改为“无”？

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

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