how pass class to element out of Dom (portal )with styled in mui/material/styles?

Question

this link show how you can style portals in material

https://mui.com/material-ui/guides/interoperability/#portals

but this is about tooltip I wanted to do it with modal or select , ...

and i tried this but didn't work I don't have any idea about popper in doc for tooltip.

const StyledSelect = styled<any>(({ className, ...props }: any) => (
  <Select
    {...props}
    classes={{
      popover: className,
    }}
  />
))`
  border: 10px solid red;
`;

Answer 1

    <StyledSelect
            labelId='demo-multiple-chip-label'
            id='demo-multiple-chip'
          multiple
          value={personName}
          onChange={handleChange}
          defaultOpen={true}
          input={
            <OutlinedInput id='select-multiple-chip' label='Chip' />
          }
          renderValue={(selected: any) => (
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
              {selected.map((value: any) => (
                <Chip key={value} label={value} />
              ))}
            </Box>
          )}
          MenuProps={MenuProps}
           >

it was my styledselect that I had used MenuProps then I had to pass className to MenuProps

  

      const StyledSelect = styled<any>(({ className, ...props }: any) => (
          <Select {...props} MenuProps={{ className: className }} />
        ))`
           & .MuiListSubheader-gutters {
            font-size: 20px;
          }
          & .MuiMenuItem-gutters {
            padding-left: 24px;
           font-size: 10px;
          }

`;

It worked for me.