material-ui [material-ui][AlertTitle] Missing Typography props when using AlertTitle

[material-ui][AlertTitle] Missing Typography props when using AlertTitle

Open d4rekanguok opened this issue 10 months ago • 4 comments

Steps to reproduce

Link to live example: (required) https://codesandbox.io/p/sandbox/cranky-wind-nw84pf?file=%2Fsrc%2FDemo.tsx

Steps:

Import AlertTitle
Pass in variant props, e.g. <AlertTitle variant="h6">

Current behavior

Type error:

Type '{ children: string; variant: string; }' is not assignable to type 'IntrinsicAttributes & AlertTitleProps'.
  Property 'variant' does not exist on type 'IntrinsicAttributes & AlertTitleProps'.

Expected behavior

No type errors

Context

According to AlertTitle doc page this is a valid use case, however when doing this in practice we ran into type error.

If that is true, what is the best way to expose Typography props in AlertTitle? Is it just a matter of importing TypographyProps in AlertTitle.d.ts and let AlertTitleProps extends it? I'm not familiar with the codebase – thanks for checking!

export interface AlertTitleProps extends TypographyProps, StandardProps<React.HTMLAttributes<HTMLDivElement>> { ... }

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.2.1
  Binaries:
    Node: 20.11.0 - ~/.volta/tools/image/node/20.11.0/bin/node
    npm: 10.2.4 - ~/.volta/tools/image/node/20.11.0/bin/npm
    pnpm: 8.15.1 - ~/.volta/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.78
    Edge: Not Found
    Safari: 17.2.1

Search keywords: material-ui, AlertTitle