0

我正在开发一个 React 组件，其中有一个 DatePicker（来自 PrimeReact 的日历组件）。

我想在弹出的日期选择器顶部添加一个箭头。如下图所示

在此处输入图像描述

以下是我表单中的一个片段：

                    <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 元素。

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

那么是否可以在不包含在 HTML 文档中的情况下从 css 添加 HTML 元素（一个 div）？还是有其他方法可以实现这一目标？

回复 anon 的回答：

我无法添加<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它本身被定位为绝对。

知道什么可以解决这个问题吗？

4

1 回答 1

1

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

.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>

于 2020-10-15T17:34:51.137 回答