Как использовать значения градиента с 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;

Ссылка для проверки: http://www.webkit.org/blog/1424/css3-gradients/

Поддержка браузера: http://caniuse.com/

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