Component prop We can use <Box /> element as a div element It does not have any styles We can apply styles via sx prop If we want to change the element tag we need to pass it in component prop <Box component="footer" /> will be a footer element Custom css props https://mui.com/system/properties/ Can set some css properties as a component props or inside sx prop
<Button sx={{ mb: 3 }}>
// or
<Box mb={3}>
// or
<Box marginBottom={3}>
.my-class {
margin-bottom: Xpx;
}
Unique keys in autocomplete issue If you have same values in autocomplete form react may throw an error Here is the example how to fix with renderOption prop
<Autocomplete
freeSolo
fullWidth
open={open}
options={gridProps.options}
inputValue={inputValue}
autoComplete
autoHighlight
selectOnFocus
popupIcon={null}
renderOption={(props, option) => (
<li {...props} key={option.value}>
{option.label}
</li>
)}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue)
}}
onHighlightChange={(event, value) => {
highlightedValue.current = value
}}
value={(gridProps.freeSolo && inputValue) || optionValue}
onChange={(event, newValue, reason) => {
if (newValue === null) {
setOptionValue(emptyOption)
return
}
setOptionValue(newValue)
setOpen(false)
setTimeout(() => {
gridProps.api.stopEditing()
gridProps.api.setFocusedCell(rowIndex, colKey)
})
}}
filterOptions={(options) => {
if (isInitRender && !isCharPressed) return options
if (!inputValue.trim()) return options
const foundOptions = options.filter(({ label }) => label.toLowerCase().includes(inputValue.toLowerCase()))
if (isInitRender && isCharPressed) return foundOptions
return foundOptions
}}
sx={{
fontFamily: 'Circular, sans-serif',
'& fieldset': {
display: 'none'
},
'& .MuiAutocomplete-endAdornment': {
background: 'transparent'
},
'& .MuiOutlinedInput-root': {
background: 'transparent !important',
pl: '15px'
}
}}
renderInput={(params) => {
return (
<TextField
inputRef={inputRef}
onClick={() => {
inputRef.current.select()
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault()
setTimeout(() => {
gridProps.api.stopEditing()
gridProps.api.setFocusedCell(rowIndex, colKey)
})
return
}
if (e.key === 'Tab') {
e.preventDefault()
if (highlightedValue.current) {
setOptionValue(highlightedValue.current)
setInputValue(highlightedValue.current?.label)
}
queueMicrotask(() => {
jumpToNextCell({ gridProps })
})
}
}}
{...params}
sx={{
'& input': {
all: 'unset !important',
width: '100% !important'
}
}}
/>
)
}}
componentsProps={{
paper: {
id: 'list-at-autocomplete-editor',
elevation: 4,
onClick: () => {
gridProps.api.setFocusedCell(rowIndex, colKey)
}
},
popper: {
open: true,
sx: {
pt: 1,
pb: 1,
'& .MuiAutocomplete-noOptions': {
display: 'none'
}
}
}
}}
/>