alteryx / alteryx-ui

MIT License
6 stars 1 forks source link

`makeStyles` and `useTheme` should be typed with the Alteryx `Theme` #28

Open pillowfication opened 1 year ago

pillowfication commented 1 year ago

Currently makeStyles and useTheme are simply reexported from @material-ui and only assume the base MUI Theme type. It would be nice if using these functions from @alteryx/ui would be typed with Alteryx's extended Theme type instead.

import { makeStyles, useTheme } from '@alteryx/ui'

const useStyles = makeStyles(theme => ({
  foobar: {
    // (TS) Property 'passive' does not exist on type 'TypeAction'
    color: theme.palette.action.passive
  }
}))

const MyComponent = (): JSX.Element => {
  const theme = useTheme()
  return (
    // (TS) Property 'passive' does not exist on type 'TypeAction'
    <div style={{ color: theme.palette.action.passive }} />
  )
}

Currently, we have to specify the Alteryx Theme type every time.

import type { Theme as AyxTheme } from '@alteryx/ui'
import { makeStyles, useTheme } from '@alteryx/ui'

const useStyles = makeStyles((theme: AyxTheme) => ({ ... }))
const theme = useTheme<AyxTheme>()
kingedward35 commented 1 year ago

Hey Pillow. Thanks for letting us know about this issue. We currently have that planned for a future update but we don't know when that will be released.