Question

我正在重新设置我的应用程序的样式，以遵循“材质UI主题”准则，并希望将某个元素的颜色设置为我的原色的Light变体。

有没有一种方法可以通过color属性进行指定？

例如，这将元素的颜色设置为我的Primary的main变体：

<DeleteIcon color="primary" />

我试图猜测各种可能的语法，例如：

<DeleteIcon color="primary[100]"/>
<DeleteIcon color="primary[light]"/>
<DeleteIcon color="primary" shade="light"/>
<DeleteIcon color="primary light"/>

这些都不具有理想的效果。

我的主要和辅助颜色是自定义的（我没有使用任何@material-ui/core/colors/HUE颜色），并且我阅读了下面的文档，这是我的一些尝试来源：

可以按照我的描述去做吗？或者，如果我想像这样对颜色进行精细控制，是否必须使用类（这是我目前正在做的样式，但要避免这样做）？

在此先感谢您的帮助！

Answer 1

通过道具提供的颜色受到限制：

  /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),

但是，如果您查看源代码，则可以看到MaterialUI正在使用的类名称属性，并相应地覆盖它们：

/* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
containedPrimary: {
    color: theme.palette.primary.contrastText,
    backgroundColor: theme.palette.primary.main,
    '&:hover': {
        backgroundColor: theme.palette.primary.dark,
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
            backgroundColor: theme.palette.primary.main,
        },
    },
},

如您所见，这将使您使用primary颜色集来设置样式（在本例中为按钮）外观。

将主要/辅助颜色归因于元素时，可以指定浅色或深色变体吗？

1 个答案: