Встроенный CSS для: hover не отображает рендеринг в clojurescript - PullRequest
Новая
       18

Встроенный CSS для: hover не отображает рендеринг в clojurescript

0 голосов
/ 11 октября 2019

Я уверен, что делаю простую идиотскую ошибку, поэтому, пожалуйста, помилуйте.

Я пытаюсь написать встроенный CSS для некоторых элементов clojurescript и компилировать следующий код, но ожидаемый цвет при наведениине рендерится.

Кто-нибудь видит, что не так? 

[:div  
[bp/icon 
{:icon "database" 
:style {:color "#555555" :padding "10px" :background-color "rgb(250, 250, 250)" :hover "rgb(255, 63, 0)"
}}]]

РЕДАКТИРОВАТЬ:

Я также пробовал этот подход, также безуспешно: 

            [:div {:class "bp3-button-group"}
             [:div  [bp/icon {:icon "database" :style {:color "#555555" :padding "10px" :background-color "rgb(250, 250, 250)" :&:hover {:background-color "#000"}

                                                       }}]

              ]]
    ```

Ответы [ 2 ]

1 голос
/ 11 октября 2019

Действительно, псевдоклассы не поддерживаются во встроенном CSS: CSS Псевдоклассы со встроенными стилями

Вы можете создать отдельный файл CSS, сгенерированный garden с полной мощью псевдоклассы, медиа-запросы и т. д.

Или вы можете найти библиотеку clojurescript, вдохновленную трендом CSS в JS, которая поддерживает ваши потребности, например, Herb: http://herb.roosta.sh/#pseudo

1 голос
/ 11 октября 2019

Псевдоклассы, такие как :hover, не могут быть применены через встроенные стили. Они могут применяться только к самим селекторам CSS, но поскольку вы не используете именованный класс, вы также не можете применять псевдоклассы.

Типичные библиотеки CSS-in-JS генерируют «виртуальное» имя класса и вместо этогоприменения фактических стилей к элементу, просто примените имя класса и создайте соответствующий селектор CSS во время выполнения.

Вам придется либо создать внешний CSS с стилями, созданными вручную 

// some.css
.some-class { ... }
.some-class:hover { ... }

// your.cljs
[:bp/icon {:icon "database" :class "some-class} ...]

используйте некоторую библиотеку, которая делает это для вас во время выполнения (например, garden), или имитируйте то же самое поведение при наведении, присоединяя пользовательские обработчики событий JS для onmouseenter onmouseout и манипулируя фактическими стилями во время выполнения.

Встроенные стили довольно ограничены в том, что они могут достичь (например, без медиа-запросов), поэтому вы хотите придерживаться реального CSS по большей части. Либо напрямую, либо через JS, который генерирует его во время выполнения.

...