如何覆盖Elastic UI框架中EuiComboBox组件的默认高度

你直接给<EuiComboBox>组件绑定的style和className只会作用在组件最外层的.euiComboBox容器上，而实际控制输入框高度的是组件内部的.euiComboBox__inputWrap元素，所以外层的样式修改不会生效，以下是两种可行的实现方案：

方案1：通过组件内置props直接传入内部容器样式（最推荐） #

EuiComboBox 提供了inputWrapperProps参数，可直接向内部的inputWrap容器传递样式/类名，无需额外编写全局样式，优先级足够覆盖默认样式：

<EuiFormRow className={FilterStyles.taskFilerContainer}>
  <EuiComboBox
    fullWidth={true}
    placeholder="Task"
    options={tasks}
    selectedOptions={selectedOption}
    onChange={(v) => handleChange(v)}
    isClearable={true}
    compressed={false}
    rowHeight={60}
    {/* 直接给内部inputWrap传样式 */}
    inputWrapperProps={{
      style: {
        height: "40px",
        paddingRight: "58.125px"
      }
    }}
  />
</EuiFormRow>

方案2：通过自定义类后代选择器覆盖 #

如果需要统一修改多个下拉框的样式，可通过后代选择器实现，注意如果你的项目使用CSS Modules（即你代码中FilterStyles的导入方式），需要将EUI原生类标记为全局，避免被编译为哈希类名导致匹配失败：

普通CSS写法 #

/* 全局css文件中 */
.custom-combobox .euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable {
  height: 40px;
  padding-right: 58.125px;
}

// 组件中给EuiComboBox绑定自定义类
<EuiComboBox className="custom-combobox" {...其他props} />

CSS Modules写法 #

/* 你的.module.css文件中 */
.taskFilerContainer :global(.euiComboBox__inputWrap.euiComboBox__inputWrap-isClearable) {
  height: 40px;
  padding-right: 58.125px;
}

不需要额外给组件加类，直接通过外层的taskFilerContainer类匹配内部元素即可。

内容的提问来源于stack exchange，提问作者NeERAJ TK