Можете ли вы указать светлый или темный вариант при назначении основного / дополнительного цвета элементу? - PullRequest
Новая
       26

Можете ли вы указать светлый или темный вариант при назначении основного / дополнительного цвета элементу?

1 голос
/ 31 марта 2019

Я изменяю стиль своего приложения, следуя рекомендациям темы Material UI, и хотел бы установить цвет определенного элемента в качестве варианта Light моего основного цвета.

Есть ли способ указать это через атрибут color?

Например, это устанавливает цвет элемента как вариант main моего Primary: 

<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 цветов), и я прочитал документы, приведенные ниже, откуда и были сделаны некоторые мои попытки:

Можно ли сделать то, что я описываю? Или я должен использовать классы (как я сейчас делаю стилизацию, но стараюсь избегать), если я хочу иметь гранулярный контроль над цветом, подобным этому?

Заранее спасибо за помощь!

1 Ответ

1 голос
/ 31 марта 2019

Вы ограничены в том, какие цвета предоставлять через реквизит: 

  /**
    * 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.

...