[docs][TypeScript] Add examples of how to extend types from MUI components
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Related page
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:
- Typing of components that have
componentprops.- I don't understand how to take all the props of let's say
Boxcomponent, add some of my own (mandatory and non-mandatory) props to them. And to add props fromcomponentwhen specifyingcomponent.
- I don't understand how to take all the props of let's say
- Typing of components that have
variantin their generics (for example, if we takeTextFieldProps). - Typing of more complex components such as
Button. - 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.
- How to define the element type for
- 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
Chipcomponent I would like to be able to passchildrenand they would be placed in the propslabel, with the propslabelitself 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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