如何覆盖 Elastic UI 组合框的默认高度答案

【问题标题】：How to override the default height of Elastic UI combobox如何覆盖 Elastic UI 组合框的默认高度
【发布时间】：2022-01-02 12:41:03
【问题描述】：

我想自定义Task 组合框的高度以匹配Date Picker。通过类或内联完成时，不会应用样式。

我尝试将元素内联样式为：

 <EuiFormRow className={FilterStyles.taskFilerContainer}>
        <EuiComboBox
          fullWidth={true}
          placeholder="Task"
          options={tasks}
          selectedOptions={selectedOption}
          onChange={(v) => handleChange(v)}
          isClearable={true}
          compressed={false}
          rowHeight={60}
          style={{ height: "40px" }}   <----- Here
          className="task"
        />
      </EuiFormRow>

还尝试添加!important，但没有用。
但是，我可以通过手动设置 euiComboBox 类的样式来覆盖浏览器中的样式：

.euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable {
    padding-right: 58.125px;
    height: 40px; <-- Here
}

有没有办法通过编写自定义类或内联样式来设置元素的样式？

【问题讨论】：

标签： css reactjs sass

【解决方案1】：

通过降低父容器filterContainer的高度来解决。降低了包裹这两个输入字段的元素的高度。

.filterContainer{
 height: 37px
}

【讨论】：