drf-react-by-schema
Version:
Components and Tools for building a React App having Django Rest Framework (DRF) as server
39 lines (38 loc) • 1.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.seamlessTextFieldStyle = void 0;
exports.seamlessTextFieldStyle = {
// 1. Remove borders but keep the focus color on the cell wrapper if needed
'& .MuiOutlinedInput-notchedOutline': { border: 'none' },
'&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' },
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' },
// 2. Force the Autocomplete wrapper to fill the cell
'&.MuiAutocomplete-inputRoot': {
height: '100%',
display: 'flex',
alignItems: 'center',
padding: '0 8px !important', // Leave room for icons
},
'& .MuiInputBase-root': {
height: '100%',
// padding: '0 !important',
fontSize: '0.875rem',
},
'& .MuiInputBase-input': {
// padding: '0 8px !important', // Align text with icons
height: '100%',
boxSizing: 'border-box',
},
// 3. The Error Message: Use the "Floating" approach
'& .MuiFormHelperText-root': {
width: '100%',
minWidth: '100%',
backgroundColor: '#fff',
border: 'none',
borderTop: '1px solid #d32f2f',
color: '#d32f2f',
zIndex: 1301,
margin: 0,
padding: '4px 8px',
},
};