Как использовать значения градиента с Theme-ui?

Question

Я использую https://theme-ui.com/ для стилизации своих компонентов. Все, что касается опыта, было великолепно, но я просто не могу заставить работать значения градиента. У меня есть кнопка, граница которой должна меняться. У меня определен следующий вариант:

 '&:hover': {
   color: 'lightGraphite',
   borderBottom: '1px solid',
   borderBottomColor: '(linear-gradient(270deg, #FE9A8B 0%, #FD868C 40.85%, #F9748F 73.15%, #F78CA0 100%))'
 }

Когда я открываю приложение, граница имеет серый цвет, и в инструментах разработчика я вижу property-invalide-value или что-то в этом роде.

Как я могу использовать значения градиента в файле настроек theme-ui?

Answer 1

Если вы хотите использовать градиент в качестве цвета границы в CSS, см. Здесь: Границы градиента

Вот что говорит главный ответ:

WebKit теперь (и, как минимум, Chrome 12) поддерживает градиенты в качестве изображения границы:

-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;

Prooflink: http://www.webkit.org/blog/1424/css3-gradients/

Браузер поддержка: http://caniuse.com/#search = border-image

Не думаю, что это проблема пользовательского интерфейса темы.