在 React 和 tailwind 中的 Select 下拉列表中添加一个 header 和 flex 中的两列

Question

是否可以在 select 下拉列表中添加两列 header，如下图所示？

我尝试了几种方法，但它没有渲染。 这是我当前的代码，没有 header 和单个 timeslow 列

<select className='base mt-2 mx-auto' value={selectedTime} onChange={(e) => {setSelectedTime(e.target.value)}}>
{
 timeslots.timeInterval.map((data,i)=> <option key={i} value={data} 
 className={`${hideTimeSlot(data,1,timezone,selectedDate)}`}> 
 {formatAmPmTime(data)}</option>)
                }
  </select>

Answer 1

不支持像您尝试那样即时编译顺风类，这是行不通的。 除此之外，您不能使用任何类型的格式，例如您在option中尝试执行的操作。 每个文档允许的内容是： Text, possibly with escaped characters (like é). 所以在这种情况下，即使是造型也行不通。