如何为AppBase中的SearchBox组件应用innerClass样式？

你混淆了 innerClass 和 style 两个属性的用法，innerClass 用于给组件内部元素绑定自定义CSS类名，仅接收类名字符串，不能直接传入样式对象，这是样式不生效的根本原因。

方案1：直接内联写样式（快速适配） #

如果要直接传入样式对象，使用 style 属性即可，属性值格式和你之前写的 innerClass 一致，键为组件内部元素标识，值为对应的样式对象：

<SearchBox 
  id="search-component"
  className={styles['search-bar-container']}
  showIcon={false}
  placeholder={'Search Bloggo'}
  style={{
    list: {
      opacity:"50%",
      fontSize:"25px"
    },
    // 可新增其他内部元素的样式配置
    input: {
      height: "44px",
      border: "1px solid #e5e7eb",
      borderRadius: "8px",
      padding: "0 12px"
    }
  }}
/>

方案2：使用innerClass绑定自定义类（更易维护，适合复杂样式） #

如果样式逻辑复杂、需要复用，优先用 innerClass 绑定自定义类，在CSS文件中编写样式：

1. 先在你的样式文件（比如xxx.module.css）中写好对应样式：

/* 你的CSS Module文件 */
.search-input {
  height: 44px;
  border-radius: 8px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
}

.search-result-list {
  opacity: 50%;
  font-size: 25px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

2. 在组件中通过 innerClass 传入对应类名：

<SearchBox 
  id="search-component"
  className={styles['search-bar-container']}
  showIcon={false}
  placeholder={'Search Bloggo'}
  innerClass={{
    input: styles['search-input'],
    list: styles['search-result-list']
  }}
/>

常用内部元素标识参考 #

你可以根据需求选择要自定义的元素：

• input：搜索输入框本体
• list：下拉搜索结果列表容器
• item：下拉列表的单个结果项
• noResults：无匹配结果时的提示容器
• icon：搜索前置图标（你配置了showIcon={false}可忽略）

内容的提问来源于stack exchange，提问作者Aadhit Shanmugam