मेरे पास एक कस्टम थीम है जहां मैंने पैलेट में कस्टम रंग जोड़े हैं। मेरी आशा थी कि रंग प्रोप एक कस्टम रंग के साथ काम करेगा। मैंने बटन घटक के साथ परीक्षण किया और यह ठीक काम किया। हालाँकि जब मैंने चिप घटक के साथ ऐसा करने की कोशिश की तो मुझे टाइपस्क्रिप्ट त्रुटि मिली:

TypeError: Cannot read properties of undefined (reading 'type')

आप यहां एक उदाहरण देख सकते हैं: https: //codesandbox.io/s/stupefied-field-2tsq4?file=/src/theme.ts:0-678 चिप घटक पर टिप्पणी करें और आप देखेंगे कि बटन अपेक्षित रूप से काम करता है।

और यह मेरा विषय जैसा दिखता है:

const theme = createTheme({
  palette: {
    slate: {
      darker: "#11161A",
      dark: "#1F2932",
      main: "#2E3D49",
      light: "#6D7780",
      lighter: "#B4B9BD",
      lightest: "#F7F7F8",
    }
  }
});

export default theme;

declare module "@mui/material/styles" {
  interface PaletteColor {
    lightest?: string;
    lighter?: string;
    darker?: string;
  }

  interface PaletteOptions {
    slate: any;
  }
}

declare module "@mui/material/Button" {
  interface ButtonPropsColorOverrides {
    slate: true;
  }
}

declare module "@mui/material/Chip" {
  interface ChipPropsColorOverrides {
    slate: true;
  }
}

और विचार?

1
Kolby 27 अक्टूबर 2021, 18:12
आपके कोडसैंडबॉक्स में कुछ भी नहीं है।
 – 
NearHuscarl
27 अक्टूबर 2021, 18:17

1 उत्तर

सबसे बढ़िया उत्तर

आप अपने कस्टम रंग में contrastText गायब हैं। से स्रोत, जब Chip रंग default नहीं है, तो यह पृष्ठभूमि रंग के लिए theme.palette[chipColorProp].main और अग्रभूमि रंग के लिए theme.palette[chipColorProp].contrastText का उपयोग करता है:

const theme = createTheme({
  palette: {
    slate: {
      darker: '#11161A',
      dark: '#1F2932',
      main: '#2E3D49',
      light: '#6D7780',
      lighter: '#B4B9BD',
      lightest: '#F7F7F8',
      contrastText: '#ffffff', // <------------------ Add this line to fix
    },
  },
});

Codesandbox Demo

1
NearHuscarl 27 अक्टूबर 2021, 18:22