使用withStyles() HOC覆盖Material UI组件样式时出现未实现Key报错

嘿，这个错误其实已经把问题说得明明白白啦！你给<Items />组件的classes属性传了一个tab键，但这个组件根本没实现这个样式钩子。报错提示里已经列得很清楚了：你只能覆盖Items组件提供的这几个样式键：card、details、content、cover、avatar、lock。

问题根源分析 #

大概率是你搞混了样式要作用的组件——比如你本来想给列表里的<Tab />组件定制样式，结果错误地把tab相关的样式定义传到了父组件<Items />的classes里，这就导致Material-UI找不到对应的样式钩子，直接抛出警告。

具体修复步骤 #

1. 明确样式目标组件：如果你要定制的是<Tab />的样式，别把样式传给<Items />，直接给<Tab />单独用withStyles()处理：

   // 给Tab组件单独创建样式
   const StyledTab = withStyles({
     root: {
       fontSize: '14px',
       padding: '8px 16px',
       // 这里写你需要的Tab样式
     }
   })(Tab);
   
   // 然后在Items组件里使用这个定制后的StyledTab
   <Items>
     <StyledTab label="你的标签" />
   </Items>
   

2. 清理无效的classes键：如果是不小心给<Items />传了多余的tab键，直接把这个键从classes对象里删掉，只保留Items支持的那几个键即可：

   // 错误写法（包含了不支持的tab键）
   const styles = {
     tab: { /* ... */ },
     card: { /* ... */ }
   };
   
   // 正确写法（只保留Items支持的键）
   const styles = {
     card: { /* ... */ },
     content: { /* ... */ }
     // 其他支持的键...
   };
   

3. 核对组件API文档：以后用Material-UI组件定制样式前，先查一下组件的官方API，确认它支持哪些classes键，避免传错。

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