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
)
// 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 }),
}
})
}
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.