[theme] Unable to create new props for Material UI components with theme customization
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior šÆ
Iām using MUI v5 and Iām trying to add a new prop to the Chip component in the react+typescript project. Muiv5 documentation demonstrates adding new value to its variant props using Module Augmentation
, but it lacks the example to demonstrate how to add new props completely.
I tried achieving the same in the JS project and it can be achieved, but somehow itās not working in the TS project.
Tried using the concept of Module Augmentation, but nothing worked in typescript.
P.S - Tried adding @ts-ignore
in the several files to instruct typescript to ignore type checking in its compile-time and everything is working as expected, but canāt go ahead with this solution as there will be no sense in using typescript if we stop TS compiler to perform type-checking.
When removing the comment // @ts-ignore
š -
Expected behavior š¤
Mui documentation states that new component variants can be created by customizing the theme and instructs to perform Module Augmentation
in the case of TypeScript.
While trying the same concept, I expect to create new props for components but am unable to do using typescript which is possible with the JSX project.
Steps to reproduce š¹
Steps:
- run https://codesandbox.io/s/mui-theme-customisation-xt7yrj and open the live code sample
- open
muiTheme.tsx
file (https://codesandbox.io/s/mui-theme-customisation-xt7yrj?file=/src/muiTheme.tsx:107-121) and remove the line no. 4, consisting of the value// @ts-ignore
- similarly, open
App.tsx
file (https://codesandbox.io/s/mui-theme-customisation-xt7yrj?file=/src/App.tsx) and remove all lines, consisting of the value{/* @ts-ignore */}
Context š¦
I want to extend the Mui component to support extra props for more customization as per the required use case.
Your environment š
`npx @mui/envinfo`
System:
OS: macOS 12.3.1
Binaries:
Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 8.8.0 - ~/.nvm/versions/node/v14.18.2/bin/npm
Browsers:
Chrome: 100.0.4896.127
Edge: Not Found
Firefox: Not Found
Safari: 15.4
npmPackages:
@emotion/react: ^11.9.0 => 11.9.0
@emotion/styled: ^11.8.1 => 11.8.1
@mui/base: 5.0.0-alpha.78
@mui/icons-material: ^5.6.2 => 5.6.2
@mui/lab: ^5.0.0-alpha.79 => 5.0.0-alpha.79
@mui/material: ^5.6.3 => 5.6.3
@mui/private-theming: 5.6.2
@mui/styled-engine: 5.6.1
@mui/system: 5.6.3
@mui/types: 7.1.3
@mui/utils: 5.6.1
@mui/x-date-pickers: 5.0.0-alpha.0
@types/react: ^18.0.0 => 18.0.8
react: ^18.1.0 => 18.1.0
react-dom: ^18.1.0 => 18.1.0
typescript: ^4.4.2 => 4.6.3
Browser used:
Google Chrome
tconfig configuration
{ ācompilerOptionsā: { ātargetā: āes5ā, ālibā: [ ādomā, ādom.iterableā, āesnextā ], āallowJsā: true, āskipLibCheckā: true, āesModuleInteropā: true, āallowSyntheticDefaultImportsā: true, āstrictā: true, āforceConsistentCasingInFileNamesā: true, ānoFallthroughCasesInSwitchā: true, āmoduleā: āesnextā, āmoduleResolutionā: ānodeā, āresolveJsonModuleā: true, āisolatedModulesā: true, ānoEmitā: true, ājsxā: āreact-jsxā }, āincludeā: [ āsrcā ] }
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:8 (4 by maintainers)
Top GitHub Comments
Yeah, creating custom wrapper components and adding new props was possible even in v4 too.
Itās a wise decision to stick to the current flow only.
Below is the example, I tried to create a wrapper component using
styled
API and achieve the expected result.Closing the issue, as everything is sorted for now.
I would suggest you carefully read the docs:
I believe it will help you decide whether custom wrapper components are really needed or it simply can be done using theme customization. In most cases, new design system with theme customization is possible by overriding default styles.
In v5, we are currently working on MUI Base which provides unstyled components and you can put your own styling solution easily. But it is still in alpha. I highly recommend you check it out because I think it fits your use case.
Custom wrapper components just for styling (no functionality) is fine since it is reusable in different locations across your application.
It does not make sense to add new props just for having that style to the components. There would be unknown number of props as each user has their own styles. Customization is the way to go.
I think we can close this issue.