[theme] Unable to create new props for Material UI components with theme customization

Duplicates

• 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:

1. run https://codesandbox.io/s/mui-theme-customisation-xt7yrj and open the live code sample
2. 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
3. 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” ] }

[rishavpandey43]

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.

import { Chip as MuiChip, ChipProps } from '@mui/material';
import { styled } from '@mui/material/styles';

import { colorConfig } from 'theme/PayTheme';

export interface CustomChipProps extends ChipProps {
  square?: boolean;
  type?:
    | 'draft'
    | 'processing'
    | 'successful'
    | 'cancelled'
    | 'selected'
    | 'deSelected';
}

const CustomChip = styled(MuiChip, {
  shouldForwardProp: (prop) => prop !== 'square' && prop !== 'type',
})<CustomChipProps>(({ square, type, clickable }) => {
  return {
    ...(square && {
      borderRadius: 4,
    }),
    ...(type === 'draft' && {
      color: colorConfig.chip.draft.color,
      backgroundColor: colorConfig.chip.draft.background,
    }),
    ...(type === 'draft' &&
      clickable && {
        color: colorConfig.chip.draft.color,
        backgroundColor: colorConfig.chip.draft.background,
        '&:focus, &:hover': {
          color: colorConfig.chip.draft.hoverColor,
          backgroundColor: colorConfig.chip.draft.hoverBackground,
        },
      }),
  };
});

const Chip = ({ square, type, ...props }: CustomChipProps) => {
  return <CustomChip square={square} type={type} {...props} />;
};

export default Chip;

---

Closing the issue, as everything is sorted for now.

[ZeeshanTamboli]

But now I’m creating a complete new Design System for our organization and want to follow the standard and following basic rules of -

1. Customize all UI level changes, whatever is possible by customizing the theme.
2. Only create wrapper component if it can’t be achieved using Theme customization or suppose there is some functionality override.

I would suggest you carefully read the docs:

1. If you are using MUI v4: https://v4.mui.com/customization/theming/
2. If you are using MUI v5: https://mui.com/material-ui/customization/theming/

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.

We all know that as our code-base increases and new people want to contribute everyone tries their own solution, and there are a lot of ways in which these things can be customized but I want to stick to the correct and standard way which is recommended by Mui.

If still there’s no such feature officially by Mui to add new props, I’ll stick to the custom approach. But would love to support and know if there’s some link where we can upvote for such new features or anything like that.

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.