Как расширить цветовую палитру в пользовательском интерфейсе материалов с помощью Typescript - PullRequest
Новая
       26

Как расширить цветовую палитру в пользовательском интерфейсе материалов с помощью Typescript

1 голос
/ 08 апреля 2020

Я новичок в реакции и машинописи. Я пытаюсь расширить цветовую палитру для глобальной темы.

в моей themeConitainer.tsx 

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

declare module '@material-ui/core/styles/createPalette' {
  // allow configuration using `createMuiTheme`
  interface Palette {
    accent: PaletteColor
  }
  interface PaletteOptions {
    accent: PaletteColorOptions,
    tertiary: PaletteColorOptions
  }
};

const ThemeContainer: React.FunctionComponent<Props> = (props, themeOptions: ThemeOptions) => {
  const { children } = props;

  const theme = useMemo(() => {
    const nextTheme = createMuiTheme({
      ...themeOptions,
      palette: {
        accent: {
          main: '#ff0000'
        },
      }
    });

    return nextTheme;
  });

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default ThemeContainer;

, но в моем компоненте произошла ошибка.

enter image description here

Никаких перегрузок при этом вызове.

Заранее спасибо.

1 Ответ

0 голосов
/ 08 апреля 2020

Короткий ответ: вы не можете (и не должны) делать это.

Длинный ответ содержит следующее объяснение:

Material UI является (одной из) реализаций React концепции Material Design.

Material Design - это язык дизайна, который Google разработал в 2014 году. Расширяя мотивы «карточек», дебютировавших в Google Now, Material Design использует больше макетов на основе сетки, адаптивных анимаций и переходов. , отступы и эффекты глубины, такие как освещение и тени.

В рамках Material Design у вас есть система цветов , которая содержит основной / дополнительный (и вариант для каждого из них) .
У вас также есть темная / светлая тема, которой вы можете управлять, и у каждой из них также есть основной / вторичный цвета.

Если вам нужно больше цветов - вы, вероятно, не следуете идее Материала Дизайн.

Вы всегда можете использовать компоненты CSS / Variables / Styled для дополнительных параметров дизайна, но, как правило, не следует.

...