CODEWITHSUNDEEP
cssreactjsmaterial-ui
caio
caio

Reputation: 85

material-ui: need help hiding dropdown icon in <Select>

I am using the Select component from material-ui. In the documentation of material-ui, it is said that you can override the CSS from the components using the tag sx={{ ... }}. I need to style the component with className of '.MuiSvgIcon-root-393', which is a SVG child of 'Select', and is the dropdown icon. Here is my attempt, but is not working:

import { Select } from '@material-ui/core'

<Select
    sx={{
      '.MuiSvgIcon-root-393': {
        visibility: 'hidden'
      }
    }}
>
    ....
<Select/>

What I am really trying to do is to make the Select arrow hidden.

I would appreciate some help in how to proceed with this, and/or any tips.

Upvotes: 0

Views: 5111

Answers (4)

Giorgi Gvimradze
Giorgi Gvimradze

Reputation: 2129

Passing popupIcon={null} was enough for <Autocomplete/> component. It might be all the same for others.

<Autocomplete
  ...
  popupIcon={null}
/>

Upvotes: 0

discovrer
discovrer

Reputation: 182

In Select sx use svg: {display:"none"}

This should hide the arrow down icon

Upvotes: 0

Tomcat
Tomcat

Reputation: 1

I am just passing "span" as component to IconComponent depending on condition, something like this:

        <Select IconComponent={shouldDisplayIcon ? ExpandMoreIcon : "span"}>
          {options.map((option: any) => (
            <MenuItem key={option.value} value={option.value}>
              {option.displayValue}
            </MenuItem>
          ))}
        </Select>

Upvotes: 0

ncasale
ncasale

Reputation: 879

Think this will solve your problem.

github.com/mui/material-ui/issues/26473

Looks like they just remove the icon, and adjust the padding to reclaim the space it would've taken up.

Upvotes: 3

Related Questions