Блог

У меня возникли проблемы с '::before' псевдо-элементом с красной стрелкой, который частично отсекается за пределами его '.MuiPaper-root' контейнера. Я бы хотел, чтобы он все еще был виден, какие-либо предложения?

Ниже я предоставил соответствующий код и скриншоты:

 const useStyles = makeStyles(theme => ({
  root: {
    left: '5rem !important',
    'amp; .MuiPaper-root': {
      'amp;::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>
 

Добавьте overflow: 'visible' свой Paper стиль, чтобы предотвратить обрезку содержимого, даже если оно находится за пределами родительского:

 overflow: "visible",
"amp;::before": {
  // ...
}