Не удается настроить типы цветовой палитры в теме пользовательского интерфейса материалов в TypeScript - PullRequest
Новая
       5

Не удается настроить типы цветовой палитры в теме пользовательского интерфейса материалов в TypeScript

1 голос
/ 27 февраля 2020

Я создаю интерфейс типа для добавления пользовательских свойств в палитру, например: 

declare module @material-ui/core/styles/createMuiTheme {
  interface PaletteColor {
    transparent?: string;
    gradient?: PaletteColor;
  }
  interface Palette {
    gradient?: PaletteColor;
    transparent?: PaletteColor;
    secondary?: {
      transparent?: string;
    }
  }

  interface PaletteColorOptions {
    main?:string;
    dark?:string;
    light?:string;
    transparent?: string;
    gradient?: string;
    test?: string
  }
}

Я пытаюсь использовать множество интерфейсов, чтобы заставить его работать ...

Затем Я использую эти типы в своей теме следующим образом: 

export default function createMyTheme(options: ThemeOptions) {
    return createMuiTheme({
      ...options,
    })
  }

Я использую эту функцию для создания своей главной темы, импортируя ее и вызывая ее: 

const theme = createMyTheme({});

И затем я устанавливаю свой компонент такой стиль: background: theme.palette.gradient.main,

и он говорит мне следующее: 

Property 'gradient' does not exist on type 'Palette'.

Environment: "@ material-ui / core": "^ 4.9. 2 "," реаги ":" ^ 16.12.0 "," машинопись ":" ^ 3.7.5 "

Вот моя полная тема: 

const theme = createMyTheme({
  palette: {
    primary: {
      main: '#5FB9A6',
      dark: 'linear-gradient(-68deg, #151E27 , #335850)',
      gradient: 'linear-gradient(-68deg, #151E27 , #335850)'
    },
    secondary: {
      main: '#C68A77',
      transparent: 'rgba(198, 138, 119, 0.7)'
    },
    error: {
      light: '#e5a0a0',
      main: '#CD5C5C',
      dark: '#992c2c',
    },
    text: {
      primary:'#20383C',
      secondary: '#151E27',
      hint: 'rgba(32, 56, 60, 0.7)'
    },
    background: {
      paper: '#fff'
    },
    common: {
      white: "#FFF"
    }
  },
  typography: {
     fontFamily: '"Work Sans"'
  }

Любая помощь будет в значительной степени оценили! Спасибо!

1 Ответ

0 голосов
/ 18 марта 2020

Я тоже пытаюсь заставить это работать, и мне не хватает чего-то очень фундаментального. Где код для declare module '@material-ui/core/styles/createMuiTheme' на самом деле go? Я попытался создать файл types.d.ts, а затем в своем файле ввода index.js я включил его следующим образом: import './config/types.d';

... но я все еще получаю такую ​​же ошибку типа, что и вы ' получаю. Что касается приведенного выше примера, похоже, что пример MUI имеет кавычки около '@material-ui/core/styles/createMuiTheme', а ваш код - нет. Кроме того, их пример показывает фактический импорт модулей из MUI, которые затем модифицируются. И, наконец, ваш код выглядит самоссылочным (например, определение градиента в интерфейсе PaletteColor также является PaletteColor). Я не знаю, является ли какая-либо из этих вещей действительно проблемной c, однако.

Мой types.d.ts файл выглядит так: 

import { Palette } from '@material-ui/core/styles/createMuiTheme';
//https://material-ui.com/guides/typescript/#customization-of-theme
declare module '@material-ui/core/styles/createMuiTheme' {
  interface Palette {
    background: {
      appSubHead: string;
    };
  }

  interface PaletteOptions {
    background?: {
      appSubHead?: string;
    };
  }
}
...