Question

现在，我们可以按以下方式在material-ui中配置主题。

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

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff4400'
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      contrastText: '#ffcc00',
    },
    // error: will use the default color
  },
});

是否可以为原色和副色提供渐变配置？恕我直言，微妙的渐变可以提供更好的色彩突显效果，并使纯色略显无聊

Answer 1

您可以在主题内设置渐变值：

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff4400',
      mainGradient: "linear-gradient(to right, tomato, cyan)",
    },
    // ...
  },
});

然后在组件style prop内部使用此值：

<AppBar
  position="static"
  style={{ background: theme.palette.primary.mainGradient }}
> ...

编辑

这确实感觉很hacky，但是我相信这是目前的唯一方法。我尚未在MUI文档中找到任何此类示例。而且，如果您检出source of <AppBar />组件，就会发现不可能使用main，light或dark颜色作为线性渐变：

export const styles = theme => {
  //...

  return {
    /* ... */

    /* Styles applied to the root element if `color="primary"`. */
    colorPrimary: {
      backgroundColor: theme.palette.primary.main, 
      color: theme.palette.primary.contrastText,
    },
    /* Styles applied to the root element if `color="secondary"`. */
    colorSecondary: {
      backgroundColor: theme.palette.secondary.main,
      color: theme.palette.secondary.contrastText,
    },
  };
};

如您所见，此处使用backgroundColor。将linear-gradient(...)设置为无效。

在Material-UI中的主题配置中直接支持渐变

1 个答案: