Below is the Custome Component which i created in Reactjs and used in different component :

function SearchBox({ 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 Some Other Component <SearchBox handle={Keyword}/> so how to override css for TexField and Box of the SearchBox component? i don't want to touch the SearchBox need to override css properties from the place where i am using this component.

When i did Inspect on the Browser i saw something like this <div >...</div>

what is css-luqe0j ?

Can Anyone Help me out with this.

CodePudding user response：

If you don't want to modify the SearchBox component at all, you have

Working CodeSandbox: https://codesandbox.io/s/peaceful-dubinsky-wjthtt?file=/demo.js

And to answer your secondary question ("what is css-luqe0j ?"), that is the generated css class name for the component -- you don't want to target an element using those because they will frequently change.