Here is a custom Reactjs component I created and used in various components:
function CustomSearchBox({ handle, placeholder, inputType, ...props}) {
return (
<Box
sx={{
display: 'flex',
alignItems: 'flex-end',
margin: 1,
marginTop: 0,
maxHeight: '30px'
}}
>
<TextField
sx={{
fontSize: '12px',
width: '100%'
}}
variant={inputType || 'standard'}
InputProps={{
startAdornment: (
<InputAdornment position='start'>
<SearchIcon
sx={{
color: 'action.active',
mb: 0.2,
display: 'flex',
alignItems: 'flex-end'
}}
/>
</InputAdornment>
),
placeholder: placeholder || 'Search'
}}
onChange={handle}
/>
</Box>
);
}
I am using this Component in another component
<CustomSearchBox handle={Keyword}/>When I inspected the browser, I noticed something like this:
<div class="MuiBox-root css-1uqe0j">...</div>What is the meaning of css-luqe0j ?
Could someone assist me with this?.