Блог

У меня странная проблема с ограничительной рамкой. Как вы можете видеть на скриншоте — положение ограничительной рамки ad_agency составляет 1-2 пикселя справа от положения реального элемента. У меня нет нечетных полей, отступов и т. Д., Все они обычные. От него расположена небольшая полоска(4 пикселя в высоту) ниже токена/чипа Ad_agency .getBoundingClientRect() и ее ширина равна ширине токена. Похоже, что визуальная ширина чипов меньше ширины ограничительной рамки, и она перемещает все прошлые элементы из ограничительной рамки (каким-то образом). Если я задам постоянную ширину (например, ширина: 150 пикселей;) — проблема исчезнет, но любые другие параметры ширины дают эту ошибку.

Я использую typescript, mobx, react, css.

 const Container = styled(CFlex)<{color: string}>`
    height: 28px;
    background-color: ${props => props.color};
    border-radius: 2px;
    display: inline-flex;
    color: white;
    margin-right: 12px;
    align-items: center;
    position: relative;
    z-index: 20;
    amp;:hover {
      z-index: 23;
}`
 

не знаю, имеет ли это значение, я использую react clone для вставки токена и добавления в него событий мыши:

 {React.cloneElement(this.props.children, {
                onMouseLeave: this.referenceMouseHandler,
                onMouseEnter: (event) => this.referenceMouseHandler(event, true),
            })}
 

где this.props.children = токен

Кто-нибудь знает, как решить эту проблему?

Минимальная версия, в которой возникает проблема(похоже, неправильное расположение содержимого): введите описание изображения здесь