0

I have a dropdown select like in the given picture. I am using NativeSelect in material UI. I have applied makeStyles from material UI but its not working on it.

Here is my picture which I want to implement in code:

enter image description here

Here is the code I have done:

const dropdownuseStyles = makeStyles(theme => ({
        dropdownStyle: {
            border: "1px solid black",
            borderRadius: "5%",
            backgroundColor: 'lightgrey',
        },
        select: {
            "&:not([multiple]) option": {
                backgroundColor: "#ffffff"
            },
        }
    }));

    const dropdownclasses = dropdownuseStyles();

<NativeSelect
  value={selected}
  IconComponent={ExpandMoreIcon                                
  input={
   <BootstrapInput />
  }
classes={{
select: dropdownclasses.select,
icon: dropdownclasses.icon,
paper: dropdownclasses.dropdownStyle
}}
onChange={(selected) => handleGroupChange(selected)}
>
    <option value="Normal">Normal Group</option>
    <option value="Super">Super Group</option>
</NativeSelect>

I just need the styling in dropdown list along with hover property gray like that in the picture.

How can I do this?.

progpro
  • 133
  • 9
  • See [this](https://stackoverflow.com/a/1895485/9449426) answer. If you want to customize the menu list component, use `Select` instead of `NativeSelect`. – NearHuscarl Apr 06 '21 at 02:56
  • Can you please tell me that how to touch the selected part to the extreme top and bottom without spacing in `Select`?. It has spacing at the top and bottom by default. Can you remove that and do it like that shown in picture??.. Is there a way to do that???. I know it can be achieved with `NativeSelect` but I need it with `Select`. Also my first MenuItem in `Select` is hiding the Label part of `Select`. Can you style it so that it can show at the bottom just like the picture??? – progpro Apr 06 '21 at 08:47

0 Answers0