React中如何向withStyles内的mockFn传递实例组件Props？

嘿，我来帮你搞定这个问题！你遇到的核心困扰是，在withStyles的样式配置里，没办法直接把组件props传给mockFn并展开它的结果对吧？其实问题出在样式规则的写法上——咱们得换个方式来组织root的样式。

正确的实现代码 #

直接看能跑的写法：

const mockFn = props => ({ 
  color: props.color,
  // 这里还能加更多需要从props生成的样式属性
});

const StyledSelect = withStyles(
  {
    // 把root改成接收props的函数，返回合并后的样式对象
    root: props => ({
      // 保留你原来的动态background属性
      background: props.bgColor,
      // 把mockFn的结果展开进来，记得传props！
      ...mockFn(props)
    })
  },
  {}
)(Select);

// 使用组件时正常传props就行
<StyledSelect bgColor="green" color="red" />

为什么原来的写法行不通？ #

• ...mockFn()：你直接调用mockFn但没传props，所以mockFn里拿不到props.color，而且这是静态展开，不会随着组件props的变化更新样式。
• props => ...mockFn(props)：这种语法在对象字面量里根本不合法！对象属性要么是键: 值的形式，要么是用函数作为值（但函数得返回单个值，不能直接展开它的返回对象）。

补充小技巧 #

Material UI允许把样式规则（比如这里的root）定义成接收props的函数，这个函数的返回值就是最终的样式对象。利用这个特性，你可以自由组合：

• 静态样式（比如padding: 8px）
• 单个动态样式属性（比如background: props.bgColor）
• 从外部函数生成的批量动态样式（比如...mockFn(props)）

这样不管你后续要扩展多少动态样式，都能通过mockFn来维护，代码也更整洁~

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