Typescript模块扩展失效求助：Material-UI中PaletteColorOptions类型不存在'main'属性

Let's break down why you're seeing this TypeScript error and how to fix it.

The Root Cause #

The error happens because when you type your Default function to return PaletteOptions, TypeScript sees the primary property as a PaletteColorOptions — which is essentially a Partial<SimplePaletteColorOptions>. That means TypeScript thinks every property on primary (including main) is optional, even though you've explicitly defined all of them in your function.

Solution 1: Use as const to Lock in Your Color Object #

One quick fix is to use as const on your primary object. This tells TypeScript that all the properties you've defined are required and won't change, so it can safely infer their existence:

import * as React from 'react';
import { createTheme, Theme, ThemeProvider, PaletteOptions } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

declare module '@material-ui/core/styles' {
  interface SimplePaletteColorOptions {
    lighter?: string;
    darker?: string;
  }
  interface PaletteColor {
    lighter?: string;
    darker?: string;
  }
}

const Default = () => {
  return {
    primary: {
      lighter: '#ddd',
      light: '#ddd',
      main: '#ddd',
      dark: '#ddd',
      darker: '#ddd'
    } as const, // This line makes TypeScript recognize all properties exist
  };
};

export default function CustomColor() {
  const defaultColors = Default();
  const palette: PaletteOptions = {
    ...defaultColors,
    divider: defaultColors.primary.main, // No more error!
  };
  const theme: Theme = createTheme({ palette });
  console.log(theme.palette.primary.light);
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" variant="contained">
        neutral
      </Button>
    </ThemeProvider>
  );
}

Solution 2: Define a Custom Type for Your Full Palette #

If you want more type safety across your codebase, create a custom interface that enforces your primary color has all required properties:

import * as React from 'react';
import { createTheme, Theme, ThemeProvider, PaletteOptions, PaletteColorOptions } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

declare module '@material-ui/core/styles' {
  interface SimplePaletteColorOptions {
    lighter?: string;
    darker?: string;
  }
  interface PaletteColor {
    lighter?: string;
    darker?: string;
  }
}

// Custom interface that ensures primary has all required properties
interface CustomPalette extends PaletteOptions {
  primary: Required<PaletteColorOptions> & { lighter?: string; darker?: string };
}

const Default = () : CustomPalette => {
  return {
    primary: {
      lighter: '#ddd',
      light: '#ddd',
      main: '#ddd',
      dark: '#ddd',
      darker: '#ddd'
    },
  };
};

export default function CustomColor() {
  const defaultColors = Default();
  const palette: PaletteOptions = {
    ...defaultColors,
    divider: defaultColors.primary.main, // Compiles without issues
  };
  const theme: Theme = createTheme({ palette });
  console.log(theme.palette.primary.light);
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" variant="contained">
        neutral
      </Button>
    </ThemeProvider>
  );
}

Solution 3: Type Assertion (Quick Fix) #

If you just need to get past the error quickly, you can use a type assertion to tell TypeScript that your primary object definitely has the main property:

divider: (defaultColors.primary as { main: string }).main,

Or a more Material-UI-specific assertion:

import { PaletteColor } from '@material-ui/core/styles';

// ...

divider: (defaultColors.primary as PaletteColor).main,

Just note that this bypasses some type safety, so use it cautiously if you might modify the primary object later.

内容的提问来源于stack exchange，提问作者Harshad Vekariya