Material UI Select React.js

Question

It is possible that we can change the behavior of the dropdown in Material UI Select? I want to change the behavior of <ul> where it should not look like a pop-up.

What I want to happen is the <li> will encapsulate the selected <ul> Just like what the 2nd picture attached below:

This is the current Select Component of Material UI

What I want to achieve is something like this:

This is my code:

<FormControl
  variant="outlined"
  className={clsx(
    classes.formControl,
    success && classes.success,
    danger && classes.danger
  )}
  required={isRequired}
>
  <InputLabel>{label}</InputLabel>
  <Select
    value={value}
    onChange={e => handleOnChange(e)}
    // MenuProps={{ classes: { paper: classes.dropdownPaper }}}
    label={label}
    name={name}
    MenuProps={{
      classes: { paper: classes.dropdownPaper },
      anchorOrigin: {
        vertical: "bottom",
        horizontal: "left"
      },
      getContentAnchorEl: null
    }}
  >
    {options.map((opt, index) => {
      return (
        <MenuItem value={opt.value} key={index}>
          {opt.text}
        </MenuItem>
      );
    })}
  </Select>
</FormControl>;

So you want to change the options' hover background color am I right? — keikai
– keikai, Commented Mar 22, 2020 at 5:40
@keikai nope, the whole style of the dropdown of select. Please check my post again, I updated it, the first pic is the current select component of material UI, and what I want to achieve is the second picture. — bossajie
– bossajie, Commented Mar 22, 2020 at 6:35
So you mean the border, font, padding, and the options' hover background color? Have you achieved some of them? Can you provide an online demo? — keikai
– keikai, Commented Mar 22, 2020 at 7:12
@Deryck Well, I hardly agree with you, in this post, Material-UI styles solution is related to React. If you check their document or check the questions under the Material-UI tag, you would find out that they are tightly bound. — keikai
– keikai, Commented Mar 22, 2020 at 10:12
@Deryck And it's a good question, although the poster seems to need to make more focus on it. I don't want it to be exposed less, so sorry but I will roll back the react tag. — keikai
– keikai, Commented Mar 22, 2020 at 10:17

nadim95 · Accepted Answer · 2020-03-23 01:02:39Z

1

Hope this helps:

What I would do is rather than searching in the textfield component section you need to go to the menu components section and search for the selected menu component or customized menu component is which the items pop right above the button here is a link: https://material-ui.com/components/menus/

you can also customize the "split button component" as it already has what you are looking for built in, the only thing you need to customize the color. here is a link to the button component the ""split button" is at the bottom of the page. https://material-ui.com/components/button-group/

Hope this helps.

answered Mar 23, 2020 at 1:02

nadim95

1143 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Material UI Select React.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related