While working within a data cell, I encountered an issue with stacking text. To workaround this obstacle, I opted to create a text field, assign it a value and helper text, disable the field, and change the text color to black when disabled. My current challenge is altering the bottom border to 'none', as I suspect that it's responsible for creating the dashed line under the input value text.
const DarkerDisabledTextField = withStyles({
root: {
marginRight: 8,
"& .MuiInputBase-root.Mui-disabled": {
color: 'black',
fontSize: '16px',
borderBottom: 'none',
}
},
underline: {
"& .MuiInputBase-root.MuiInput-outlined": {
borderBottom: 'none',
}
}
})(TextField);
The above snippet showcases how I created and styled my text field. However, the underline key did not produce the expected results based on my research.
Here are the attempts I've made so far with my text field:
<DarkerDisabledTextField
title={params.data.name}
disabled
defaultValue={params.data.name}
helperText={title}
fullWidth
/>