React类组件转函数组件后样式不生效问题排查：HOC导出方式是否合规？

先给你吃个定心丸：你用的导出方式export default withRouter(withStyles(styles, {name: 'MyStyle'})(MyHeader));对函数组件是完全适用的——HOC（高阶组件）不管包裹类组件还是函数组件，逻辑上都是成立的，所以问题肯定不在导出写法上，咱们从别的地方找原因。

我看了你自定义的withStyles实现，发现一个很可能的关键问题：

1. 自定义withStyles的默认主题参数名错了 #

@material-ui/styles官方的withStyles中，指定默认主题的配置项参数名是defaultTheme，但你在代码里写成了defTheme：

// 你的错误写法
return withStylesWODefault(styles, { defTheme, ...options });

这会导致你的自定义withStyles没办法把你自己的defTheme正确传递给样式函数，样式里拿不到palette.somekit的值，自然样式就不生效了。

修正后的自定义withStyles应该是这样：

import { withStyles as withStylesWODefault } from '@material-ui/styles';
import defTheme from './defTheme';
export default function withStyles(styles, options) {
  // 把自定义主题赋值给正确的参数名defaultTheme
  return withStylesWODefault(styles, { defaultTheme: defTheme, ...options });
}

2. 检查函数组件是否正确接收并使用classes #

类组件里你可能通过this.props.classes访问样式类，但转成函数组件后，要确保你正确从props中解构出classes，并且在渲染时正确使用：

function MyHeader(props) {
  // 一定要从props里拿到classes
  const { classes } = props;
  return (
    // 渲染时使用对应的样式类
    <div className={classes.tabs}>
      {/* 你的组件内容 */}
    </div>
  );
}

要是你忘记解构，或者错误地写了className={tabs}这种，样式肯定不会生效。

3. 额外排查步骤（如果上面的修正还没解决问题） #

• 在样式函数里加个日志，看看有没有拿到正确的主题：

  const styles = ({palette: {somekit}}) => {
    console.log('当前主题的somekit:', somekit);
    return ({ tabs: { backgroundColor: somekit.grey }, })
  }
  

  如果日志里somekit是undefined，那说明你的defTheme结构有问题，检查一下defTheme里是不是真的有palette.somekit.grey这个路径。
• 确认没有其他HOC（比如React.memo）干扰了classes的传递，要是用了memo，记得不要浅比较过滤掉classes。

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