MUI：伪元素在 Paper 之外被截断答案

【问题标题】：MUI: Pseudo element being cut-off outside of PaperMUI：伪元素在 Paper 之外被截断
【发布时间】：2021-10-12 17:07:00
【问题描述】：

我遇到了一个红色箭头'::before' 伪元素在其'.MuiPaper-root' 容器之外被部分切断的问题。我希望它仍然可见，有什么建议吗？

下面我提供了相关代码和截图：

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>

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

在您的Paper 样式中添加overflow: 'visible' 以防止内容被剪辑，即使它在父级之外：

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

【讨论】：