[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[material-ui][SvgIcon] Can't add a custom color #41086

Open
SerdarSanri opened this issue Feb 13, 2024 · 3 comments
Open

[material-ui][SvgIcon] Can't add a custom color #41086

SerdarSanri opened this issue Feb 13, 2024 · 3 comments
Assignees
@siriwatknp
Labels
component: SvgIcon The React component. package: material-ui Specific to @mui/material support: question Community support but can be turned into an improvement typescript

Comments

@SerdarSanri
Copy link
SerdarSanri commented Feb 13, 2024 •
edited
Loading

Steps to reproduce

Hi I am not sure what I am doing wrong but when I try to add a new color in palette I can use the instructions in documentation to define new module augmentation for most of the components to make new color available but for some reason for SvgIcon it doesn't make any difference

https://mui.com/material-ui/customization/palette/#typescript

declare module '@mui/material/styles' {
    interface PaletteOptions {
        primaryLight?: PaletteColorOptions;
        secondaryLight?: PaletteColorOptions;
    }

    interface Palette {
        primaryLight: PaletteColor;
        secondaryLight: PaletteColor;
    }
}

// this works fine.
declare module '@mui/material/Button' {
    interface ButtonPropsColorOverrides {
        primaryLight: true;
        secondaryLight: true;
    }
}

// but this doesn't
declare module '@mui/material/SvgIcon' {
    interface SvgIconOwnPropsColorOverrides {
        primaryLight: true;
        secondaryLight: true;
    }
}
// or

declare module '@mui/material/SvgIcon' {
    interface SvgIconPropsColorOverrides {
        primaryLight: true;
        secondaryLight: true;
    }
}

// tried this way but still no luck
declare module '@mui/icons-material/node_modules/@mui/material/SvgIcon' {
    interface SvgIconOwnPropsColorOverrides {
        primaryLight: true;
        secondaryLight: true;
    }
}
// or

declare module '@mui/icons-material/node_modules/@mui/material/SvgIcon' {
    interface SvgIconPropsColorOverrides {
        primaryLight: true;
        secondaryLight: true;
    }
}

src/views/pages/public/ResetPassword/ResetPasswordForm.tsx:132:69 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any, keyof IntrinsicElements>; } & { children?: ReactNode; classes?: Partial<SvgIconClasses>; ... 6 more ...; viewBox?: string; } & CommonProps & Omit<...>): Element', gave the following error.
    Type '"primaryLight"' is not assignable to type 'OverridableStringUnion<"secondary" | "error" | "success" | "info" | "inherit" | "disabled" | "action" | "warning" | "primary", SvgIconPropsColorOverrides>'.
  Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element', gave the following error.
    Type '"primaryLight"' is not assignable to type 'OverridableStringUnion<"secondary" | "error" | "success" | "info" | "inherit" | "disabled" | "action" | "warning" | "primary", SvgIconPropsColorOverrides>'.

132                                             checkedIcon={<CheckIcon color='primaryLight' />}
                                                                        ~~~~~

  node_modules/@mui/icons-material/node_modules/@mui/material/SvgIcon/SvgIcon.d.ts:27:5
    27     color?: OverridableStringUnion<
           ~~~~~
    The expected type comes from property 'color' which is declared here on type 'IntrinsicAttributes & { component: ElementType<any, keyof IntrinsicElements>; } & { children?: ReactNode; classes?: Partial<...>; ... 6 more ...; viewBox?: string; } & CommonProps & Omit<...>'
  node_modules/@mui/icons-material/node_modules/@mui/material/SvgIcon/SvgIcon.d.ts:27:5
    27     color?: OverridableStringUnion<
           ~~~~~
    The expected type comes from property 'color' which is declared here on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses>; color?: OverridableStringUnion<"secondary" | "error" | "success" | ... 5 more ... | "primary", SvgIconPropsColorOverrides>; ... 5 more ...; viewBox?: string; } & CommonProps & Omit<...>'

Current behavior

defining module augmentation for new palette color does not affect on SvgIcon color definitions.

Expected behavior

It should work the same way other components as described in documentation.

Context

No response

Your environment

npx @mui/envinfo 
  System:
    OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur)
  Binaries:
    Node: 18.13.0 - /usr/bin/node
    npm: 9.2.0 - /usr/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 120.0.6099.224
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base: ^5.0.0-beta.30 => 5.0.0-beta.33 
    @mui/core:  5.0.0-alpha.47 
    @mui/core-downloads-tracker:  5.15.6 
    @mui/icons-material:  5.0.0 
    @mui/lab: ^5.0.0-alpha.159 => 5.0.0-alpha.162 
    @mui/material: ^5.15.3 => 5.15.6 
    @mui/private-theming:  5.15.6 
    @mui/styled-engine:  5.15.6 
    @mui/styles: ^5.15.3 => 5.15.6 
    @mui/system:  5.15.6 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.6 
    @mui/x-date-pickers: ^6.18.7 => 6.19.2 
    @types/react: ^18.2.43 => 18.2.48 
    react: ^17.0.0 => 17.0.2 
    react-dom: ^17.0.0 => 17.0.2 
    typescript: ^5.2.2 => 5.3.3
tdconfig.json 
 {
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "noEmitOnError": false,
    "jsx": "react-jsx",
    "rootDir": "./src",
    "baseUrl": "./src",
    "sourceMap": true
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "include": [
    "src",
    "./src/types"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Search keywords: SvgIconOwnPropsColorOverrides
@SerdarSanri SerdarSanri added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 13, 2024
@zannager zannager added the component: SvgIcon The React component. label Feb 14, 2024
@siriwatknp siriwatknp added typescript support: question Community support but can be turned into an improvement and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 19, 2024
@siriwatknp
Copy link
Member

Can you try this in the same file that you declare the module augmentation?

import type {} from '@mui/material/SvgIcon';

declare module '@mui/material/styles' {
…

@danilo-leal danilo-leal changed the title Can not add custom color to SvgIcon [material-ui][SvgIcon] Can't add a custom color Mar 31, 2024
@danilo-leal danilo-leal added the package: material-ui Specific to @mui/material label Mar 31, 2024
@adamgen
Copy link
adamgen commented Aug 5, 2024

I have the same issue... Adding @siriwatknp 's proposal doesn't help.

I understand that it's more a ts then it as a MUI issue, but seems reasonable that MUI would add explicit examples for implementing it.

@evilDave
Copy link
evilDave commented Dec 9, 2024 •
edited
Loading

Any advice on this? It is a linter problem as the code does actually work. Also - I am sure that I have not seen the lint error before and this is customisation that I added to the project in question 6 months ago, it's a bit odd, I don't see what's changed though.

Edit to note: setting color to the custom color added by module augmentation to SvgIconPropsColorOverrides does work (the correct color is used for the icon), but it produces the TS error noted above.

Also, workaround for some: I am using all the icons within IconButton components, so moving the color prop to the IconButton avoids this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@siriwatknp siriwatknp

Labels
component: SvgIcon The React component. package: material-ui Specific to @mui/material support: question Community support but can be turned into an improvement typescript
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@evilDave @SerdarSanri @adamgen @siriwatknp @danilo-leal @zannager