I am having issues seeing styles getting applied from my component when converting my component from class-based to function-based component.

it is probably related to HOC issue.

So in my component, I have the styles defined as below;

const styles = ({palette: {somekit}}) => ({
    tabs: {
        backgroundColor: somekit.grey
    },
})

Earlier, it was a class-based component as below (and I could see the styles getting picked from above)

class MyHeader extends React.Component{}

However, after converting it into a function-based component as below, the styles defined above do not seem to be getting picked up.

function MyHeader(props) {}

In both the cases, I had the export defined as below;

export default withRouter(withStyles(styles, {name: 'MyStyle'})(MyHeader));

I suspect some issue with the way the component is exported above when converting from class-based to function-based. Does this export seem proper when using function-based component ?

---Updated--- This is how withStyles is defined;

import { withStyles as withStylesWODefault } from '@material-ui/styles';

    import defTheme from './defTheme';
    
    export default function withStyles(styles, options) {
      return withStylesWODefault(styles, {
        defTheme,
        ...options
      });
    }