Build error with custom color(s) assigned top B

[tracker1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://github.com/tracker1/synchronet-web-t1/tree/main/web-client-src

Steps:

1. npm i
2. npm run build

Current behavior 😯

Errors regarding custom color property on the buttons.

synchronet-web-t1/web-client-src on  main [✘!?] via ⬢ v18.12.1 took 2s 
❯ npm run build

> [email protected] build
> tsc && vite build

src/app/FooterBar.tsx:38:21 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "primary" | "secondary" | "error" | "warning" | "info" | "success" | "inherit" | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.
    Type '"white" | "brightWhite"' is not assignable to type '"primary" | "secondary" | "error" | "warning" | "info" | "success" | "inherit" | undefined'.
      Type '"white"' is not assignable to type '"primary" | "secondary" | "error" | "warning" | "info" | "success" | "inherit" | undefined'.
  Overload 2 of 3, '(props: { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "primary" | ... 6 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.
    Type '"white" | "brightWhite"' is not assignable to type '"primary" | "secondary" | "error" | "warning" | "info" | "success" | "inherit" | undefined'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element', gave the following error.
    Type '"white" | "brightWhite"' is not assignable to type '"primary" | "secondary" | "error" | "warning" | "info" | "success" | "inherit" | undefined'.

38             <Button color={isDark ? "white" : "brightWhite"} onClick={themeAction.toggleDarkMode}>
                       ~~~~~

  node_modules/@mui/material/Button/Button.d.ts:34:5
    34     color?: OverridableStringUnion<
           ~~~~~
    The expected type comes from property 'color' which is declared here on type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "primary" | ... 6 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>'
  node_modules/@mui/material/Button/Button.d.ts:34:5
    34     color?: OverridableStringUnion<
           ~~~~~
    The expected type comes from property 'color' which is declared here on type 'IntrinsicAttributes & { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; ... 10 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>'
  node_modules/@mui/material/Button/Button.d.ts:34:5
    34     color?: OverridableStringUnion<
           ~~~~~
    The expected type comes from property 'color' which is declared here on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "primary" | "secondary" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>'
...

Found 1 error in src/app/FooterBar.tsx:38

Expected behavior 🤔

Expect the build to work, with the src/types.ts being included per instructions... note: I did have Palette['primary'] and PaletteOptions['primary'] and that portion doesn't seem to make a difference.

Context 🔦

Additional/Custom colors assigned to Button component.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
    npm: 9.1.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Firefox: Not Found
  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/system:  5.10.16 
    @mui/types:  7.2.2 
    @mui/utils:  5.10.16 
    @types/react: ^18.0.25 => 18.0.25 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.3 => 4.9.3 

[ZeeshanTamboli]

@tracker1 Are you still experiencing this issue? If not, can you close this issue? I don't see any <Button color={isDark ? "white" : "brightWhite"} ... > component being used https://github.com/tracker1/synchronet-web-t1/search?q=%3CButton. You need to add custom Button colors in theme through TypeScript module augmentation.

[tracker1]

@ZeeshanTamboli I think I was still seeing the issue... I did find a stackoverflow answer that I need to add more than just the palette colors to get the color options on buttons... will try to get this updated over the coming weekend.

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.