Search code examples
cssreactjsmaterial-uiposition

material ui select arrow on left side

I am new to material ui I am trying to understand some things

I have a simple select component and I have two problems with it.

First I want to make the arrow icon of the select on the left side and not on the right Second I want to color the input of the select in blue color but I only managed to color the dropdown values

here is what I tried

any help will be appreciated, thanks

Solution

  • MUI components are like packages that are made of some smaller parts. And you can change their styles by selecting their specific names in the sx props.
    For example "& .MuiMenuItem-root" is for menu items, and "& .MuiSvgIcon-root" is for the little arrow icon of the Select.
    By the way, to change the main things like the color of the whole thing, you only need to put that in the sx. This would be the thing you want:

    <Select
  fullWidth
  IconComponent={ArrowDownwardIcon}
  value={selected}
  variant="outlined"
  onChange={selectionChangeHandler}
  sx={{
    backgroundColor: "red",
    "& .MuiSvgIcon-root": {
      right: "unset",
      left: "7px",
    },
  }}
>

    You can learn about all these strings in MUI api docs or inspecting theme in your browser developer tools.