Skip to content

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

@d4rekanguok

Description

@d4rekanguok

Steps to reproduce

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

Steps:

  1. Import AlertTitle
  2. 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

Metadata

Metadata

Assignees

Labels

good first issueGreat for first contributions. Enable to learn the contribution process.scope: alertChanges related to the alert.type: bugIt doesn't behave as expected.typescript

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions