将字体粗细更改为粗体以获取 reactjs 中的下拉值

Question

我有以下代码作为回报。它正在创建一个下拉值。我想将 ${status} 和 ${dataIdText} 的下拉值的字体粗细更改为粗体

   <Modal.Body className="container-fluid">
  <div className='row'>
    <label className='col-sm-4' htmlFor='portalSelector'>Exiting item: </label>
    <select className='col-sm-8' id='portalSelector' onChange={this.onSelectionChange} value={this.state.selectedItem}>
      <option key='-1' label='--Make a selection--' value='-1' />
      {((dataId === '') ? stateVar : stateVar.filter((val)=> (val.dataId +"") === dataId )).map((p, index) => {
        const status = p.status === 'PENDING' ? '' : p.status === 'SENT'?'':'Unscheduled'
        const dataIdDef = datasets.filter((val)=> val.dataId === p.dataId )[0]

        const dataIdText = p.dataId === -1? '' : `${dataIdDef.dataIdname} - `

        const scheduleDtText = p.scheduleDt === 5711817600000 ? '' : 'scheduled for ' + moment(p.scheduleDt).format('DD/MM/YYYY HH:mm')
        return (<option 
          className='data'
          key={index} 
          value={index}               
          label={`${status} ${dataIdText} ${p.title} ${scheduleDtText}`}>

        </option>)
      }
      )}
    </select>
  </div>
</Modal.Body>

我试图删除 label 属性并将文本放在 Options 标记本身中，但没有成功。

Answer 1

试试这个形状

  label={()=>( <span className="bold">{status}<span className="bold"> {datasetIdText}<span/> {p.title} {scheduleDtText}`}>

Answer 2

上次编辑

事实证明这可能是不可能的。早在 2011 年对“How to style the option of an html "select" element?”的回答就指出了这一点，看来这仍然是正确的。

例如，Mozilla 的 <option> HTML 元素 docs 表示标签中唯一允许的内容是“文本，可能带有转义字符（如 é）。”

我不会删除我一开始提出的解决方案，因为它们看起来都是简单问题的简单解决方案，但事实证明这根本不是一个简单的问题（除非有人愿意纠正我）。

结束上次编辑

初步回答

尝试将标签传递给功能组件而不是字符串

return (<option
    className='data'
    key={index} 
    value={index}
    label={() => (
         <span><strong>{status} {datasetIdText}</strong> {p.title} {scheduleDtText}</span>
    )}
    </option>
)

根据问题更新进行编辑

您是否有理由需要在“标签”属性中格式化的字符串？这似乎太明显了，所以如果你已经这样做了或者这不是一个选项，我提前道歉，但是为什么不把标签放在option标签本身呢？

<option 
    className='data'
    key={index} 
    value={index} 
    // label={`${status} ${p.type} ${dataIdText}${scheduleDtText}`}
>
    {/* move label here */}
    <strong>{status} {dataIdText}</strong> {p.title} {scheduleDtText}
</option>