MUI: Pseudo element being cut-off outside of Paper

Question

I am having trouble with a red arrow '::before' pseudo element being partly cut-off outside of its '.MuiPaper-root' container. I would like for it to still be visible, any suggestions?

Below I have provided the relevant code and screenshots:

const useStyles = makeStyles(theme => ({
  root: {
    left: '5rem !important',
    '& .MuiPaper-root': {
      '&::before': {
        position: 'absolute',
        left: '4rem',
        display: 'inline-block',
        top: '-3.9rem',
        fontSize: '5rem',
        fontFamily: 'Material Icons',
        content: '"arrow_drop_up"',
        color: 'red',
        zIndex: '5 !important',
      },
    },
  },
}));

<S.Item style={{ alignSelf: 'stretch' }}>
          <S.ItemGrid>
            <S.Title>Guest rating</S.Title>
            <S.Rating>
              <FormControl style={{ width: '10rem' }}>
                <S.StyledSelect
                  defaultValue={3.5}
                  value={rating.currency}
                  onChange={changeRating('currency')}
                  renderValue={option => option.value}
                  MenuProps={{
                    classes: { root: classes.root },
                  }}
                >
                  {ratings.map(option => (
                    <S.StyledMenuItem key={option.value} value={option}>
                      <div>{option.value}</div>
                      <div>{option.label}</div>
                    </S.StyledMenuItem>
                  ))}
                </S.StyledSelect>
              </FormControl>
            </S.Rating>
          </S.ItemGrid>
        </S.Item>

Answer 1

Add overflow: 'visible' in your Paper style to prevent the content from being clipped even if it's outside the parent:

overflow: "visible",
"&::before": {
  // ...
}