插入html格式sass / css中不存在的div

问题描述

我正在开发一个具有DatePicker（PrimeReact的日历组件）的React组件。

我想在弹出的日期选择器上添加一个箭头。就像下面的图片一样

下面是我的表单中的代码段：

                    <div className='form-group col-md-4 calendar-group'>
                        <FontAwesomeIcon icon={faCalendaralt} className='l-input-icon' />
                        <Calendar 
                            className='form-control'
                            dateFormat="dd/mm/yy" 
                            value={shippingDate? shippingDate.date:shippingDate} 
                            onChange={(e) => setShippingDate({date: e.value})}
                            placeholder='Shipping Date'
                            
                        />
                    </div>

以下是组件渲染时HTML dom的跨度照片

问题在于，因为我使用的是Calender组件，所以我在该Calender的DOM中添加了HTML元素。

基本上，我想在.p-datepicker顶部放置div（高度和宽度为0，底部边框较粗，以实现箭头）

那么可以从CSS中添加HTML元素（一个div），而不必将其包含在HTML文档中吗？还是有其他方法可以实现这一目标？

回复匿名答案：

我无法添加<div className='arrow'>，因为我无法将其注入到压延组件中。

我在scss文件中添加了以下代码：

.p-calendar{
    position: relative;
    .p-datepicker{
      margin-top: 16px;
      min-width: 270px;
      position: absolute;
      &:before {
        content: "";
        display: inline-block !important;
        width: 0;
        height: 0;
        border-bottom: 8px solid red;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        vertical-align: middle;
      }
    }
  }

现在日期选择器看起来像这样。

我尝试在position: absolute内添加pseudo element，但由于我认为datepicker本身的位置是绝对的，因此无法正常工作。

有什么办法解决这个问题吗？

解决方法

请参见下面的使用伪元素的示例。

.arrow:after {
  content: "";
  display: inline-block !important;
  width: 0;
  height: 0;
  border-bottom: 8px solid red;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.arrow{
  background: green;
  width:100%;
  position relative;
}

<div class="arrow">
   Some content
</div>