Unable to find out the types needed to add to parameter of custom function

Question

I'm using tss-react and MUI package and I'm unable to figure what to set the types for custom function I've written which basically merges all my common styles and the specific styles I want for a component.

Due to this I'm getting TypeScript errors when accessing my classes object. (eg: Property 'colorRed' does not exist on type 'Record<never, string>'.

What types to add in the getUseStyles.ts file so that I get both the types from commonStyles file and my component styles ? (Basically typescript/editor should be able to intellisense when accessing classes object keys like classes.colorRed or classes.colorBlue)

CodeSandbox

// File: Test.tsx
const useStylesHook = getUseStyles(  // Merging component styles and common styles
  (theme) => {
    return {
      colorRed: {
        color: 'red',
      },
      colorBlue: {
        color: 'blue',
      },
    }
})

export default function Test() {
  const { classes, cx } = useStylesHook()
  return (
    <h1 className={cx(classes.colorRed, classes.padding20, classes.colorBlue)}>
      Testing this color
    </h1>
  )
}

// File: commonStyles.ts
export const commonStyles = (theme) => {
  return {
    padding20: {
      paddingTop: '20px',
    },
  }
}

// File: getUseStyles.ts
export const getUseStyles = (
  styles: any, // What types to add here ?
  customStyles?: any,
) => {
  return makeStyles()((theme) => {
    return {
      ...commonStyles(theme),
      ...styles(theme, { ...customStyles }),
    }
  })
}

Answer 1

We can achieve this by making the key of the record returned by the passed styles function generic such that the information required to infer these properties is not lost.

import { Theme } from '@mui/material'
import { CSSObject } from 'tss-react'
import { commonStyles } from '../commonStyles'
import { makeStyles } from './helpers'

export const getUseStyles = <
  RuleNames extends string,
  CustomStyles extends Record<string, any>,
>(
  styles: (
    theme: Theme,
    customStyles?: CustomStyles,
  ) => Record<RuleNames, CSSObject>,
  customStyles?: CustomStyles,
) => {
  return makeStyles()((theme) => {
    return {
      ...commonStyles(theme),
      ...styles(theme, { ...customStyles } as CustomStyles),
    }
  })
}

It's unclear what the purpose of customStyles is or how it affects the return values of the passed styles function. So that basically doesn't do anything type-wise here currently.