修改材料中的MuiTheme-ui-next

Question

我目前使用以下代码修改materialUI v.0中的主题

import { deepOrange900, deepOrange800, deepOrange700, redA400, grey200, grey400, white } from 'material-ui/styles/colors';

exports.darkOrangeTheme = {
    palette: {
        primary1Color: '#21242d',
        primary2Color: '#A6956D',
        primary3Color: '#c10000',
        accent1Color: deepOrange900, //#BF360C
        accent2Color: deepOrange900, //#BF360C
        accent3Color: deepOrange800, //#D84315
        required: redA400, //#FF1744
        borderColor: grey200, //#eeeeee
        disabledColor: grey400, //#bbbbbb
        white: white, //#ffffff

        textColor: '#d0d2d7',
        secondaryTextColor: '#d0d2d7',
        alternateTextColor: '#A6956D',
        canvasColor: '#2D323E',
        pickerHeaderColor: '#a2490e',
        clockCircleColor: '#ed7d31',
        colorAlt: '#6e7a96',
        colorAlt2: '#636e88',
    },
    appBar: {
      color: '#21242d',
      textColor: deepOrange800,
      height: 60,
      padding: '15px',
      titleFontWeight: '800',
    },
    checkbox: {
        boxColor: grey200,
        checkedColor: deepOrange900,
    },
    ..... etc etc ...
};

这不适用于Material-UI-Next，我知道。但我正在寻找类似的方法。我有主题选择器正常工作但我不知道什么材料-ui-next v.1用于定义primary1Color，canvasColor或每个组件以及我可以从每个组件实际更改的内容等。

为了帮助您了解系统的工作原理，我有一个主题选择器组件，它取决于选择了哪个，或者加载了另一个文件。在这种情况下，这是一个darkOrange主题。然后，MuiUI使用此文件为整个应用程序中的组件着色，而不需要太多CSS和更多全局。

任何人？

提前致谢。

Answer 1

Theme Customization涵盖了您正在寻找的大部分内容。像Customizing the palette这样的事情非常简单：

该主题揭示了以下颜色意图：

• primary - 用于表示用户的主要界面元素。
• secondary - 用于表示用户的辅助界面元素。
• error - 用于表示用户应该知道的界面元素。

所以primary，secondary和error可以表示为PaletteIntention，它是一个可用于定义每种颜色的界面：

interface PaletteIntention {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
};

以下是将自定义颜色应用于主题调色板的示例：

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

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#ff4400',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contast with palette.primary.main
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      // dark: will be calculated from palette.secondary.main,
      contrastText: '#ffcc00',
    },
    // error: will us the default color
  },
});

在此示例中，primary和secondary颜色的部分被覆盖，error保留其默认值。

对于customize Components，您将覆盖特定的类。基本上，如果一个类在组件的CSS API中公开，它可以在主题中被覆盖。但是，CSS API文档缺乏。在每个组件页面上，您将看到可用类的列表，但没有任何内容可以解释它们的作用及其影响的属性。

有一个open enhancement request将此信息添加到文档中。