Type error of `Palette`

[Suyama-Daichi]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Is createPalette.d.ts indicating inherit?

this has property of inherit

but type Palette don't have inherit

Current behavior 😯

I faced type error in this component.

import React, { FC, ReactNode } from 'react'
import { Button, ButtonProps } from '@mui/material'
import { styled } from '@mui/material/styles'
import styles from '../styles/MainButton.module.scss'

interface Props {
    className?: string
    children?: ReactNode
}

const MainButton: FC<Props & ButtonProps> = ({
    className,
    children,
    ...rest
}) => {
    const color = rest.color ? rest.color : 'primary'

    const StyledButton = styled(Button)(
        ({ theme }) => `
            background-color: ${theme.palette[color].main}; // here
            &:hover,
            &:focus {
                background-color: ${theme.palette[color].dark}; // here
            }
      `
    )

    return (
        <StyledButton
            {...rest}
            className={styles.dialogButton + ' ' + className}
        >
            {children}
        </StyledButton>
    )
}

export default MainButton

Expected behavior 🤔

resolved type error.

Context 🔦

• I forked this starter
• update dependencies(MUI is latest)
• fix error for npm run dev
• run npm run prod
• I noticed this error

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

  System:
    OS: macOS 12.6.1
  Binaries:
    Node: 18.12.1 - ~/.nodebrew/current/bin/node
    Yarn: 1.22.19 - ~/.nodebrew/current/bin/yarn
    npm: 9.1.2 - ~/.nodebrew/current/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.1
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5 
    @emotion/styled: ^11.10.5 => 11.10.5 
    @mui/base:  5.0.0-alpha.108 
    @mui/core-downloads-tracker:  5.10.16 
    @mui/icons-material: ^5.10.16 => 5.10.16 
    @mui/material: ^5.10.16 => 5.10.16 
    @mui/private-theming:  5.10.16 
    @mui/styled-engine:  5.10.16 
    @mui/styles: ^5.10.16 => 5.10.16 
    @mui/system:  5.10.16 
    @mui/types:  7.2.2 
    @mui/utils:  5.10.16 
    @mui/x-data-grid: ^5.17.14 => 5.17.14 
    @types/react: 18.0.25 => 18.0.25 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    styled-components: ^5.3.6 => 5.3.6 
    typescript: ^4.9.3 => 4.9.3 

[mnajdova]

The inherit color values in the Button component indicate that the Button will have the inherit CSS color value: https://developer.mozilla.org/en-US/docs/Web/CSS/inherit. See the Button's styles: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Button/Button.js#L197