mui / mui/material-ui

[docs][TypeScript] Add examples of how to extend types from MUI components

Open
#44,493 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: all components support: docs-feedback typescript
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Related page

https://mui.com/material-ui/

Kind of issue

Other

Issue description

Let me start by saying that I am using a translator and I hope my message will be understood.
I have always had problems with creating custom components based on MUI components. The problem is the typing of such components.
List of examples I would like to see:

  1. Typing of components that have component props.
    • I don't understand how to take all the props of let's say Box component, add some of my own (mandatory and non-mandatory) props to them. And to add props from component when specifying component.
  2. Typing of components that have variant in their generics (for example, if we take TextFieldProps).
  3. Typing of more complex components such as Button.
  4. How to type it all if we need to wrap everything in forwardRef.
    • How to define the element type for ref (HTMLDivElement, HTMLButtonElement, etc.).
    • It's also worth considering this type if a component is passed in component.
  5. Also for all this I would like to see an example where we remove some props from the component and/or replace them with our own. For example in a Chip component I would like to be able to pass children and they would be placed in the props label, with the props label itself removed from the typing props (I don't know how to explain it).

(Important: The point is not to change the theme of some component, but to add your logic to it.)

If you could add a new page and/or to the component page examples of how to create a component based on that component - that would be awesome.

I realize it would take a lot of time to add this to the documentation, so I would like to see these examples under my Issue.

Thank you for your work and efforts!

Context

No response

Search keywords: no

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the related Material UI page and review how its TypeScript component documentation is organized. Define examples covering component props, variant generics, Button, forwardRef, ref element types, and replacing or omitting props. Done means the requested extension patterns are documented with practical examples on a new or relevant component page.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
documentation, frontend
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.