Как использовать значения динамического класса, такие как disabled или active, с помощью theme-ui?

Question

Итак, я использую theme-ui и его возможности создания тем, но я новичок в этом.

По-старому я просто использовал пакет classNames и динамически добавлял стили в зависимости от свойств, состояния и т. Д.

аля ...

              const btnStyles = cn('plainButton', {
          [styles.active]: isActive,
          [styles.disabled]: isDisabled,
        });

Итак, как видите - я мог обновить кнопку на основе реквизита. Как мне сделать этот пользовательский интерфейс темы остроумие?

Как мне отключить динамику или сказать «активное» состояние кнопке, div или чему-то еще с помощью theme-ui. Как мне этого добиться? Должен ли я объявить тип темы в моем файле theme.js или использовать «jx» для переопределения?

Есть примеры?

Answer 1

Вы можете определить стиль отключенного и активного состояния в theme.buttons объект :

      // example theme variants
{
 buttons: {
   primary: {
     color: 'background',
     bg: 'primary',
     '&:disabled': {
       //your style
     },
     '&:active': {
       //your style
     }
   }
 }
}

Чтобы узнать больше