Как подружить Vue.js и библиотеку Simplebar?

Question

[Фёдор]

Вечер добрый! Дошёл до задачи сделать кастомный скроллбар. Тут уже посоветовали пару библиотек для этого дела. Выбор пал на Simplebar. Установил её через npm. Добавил обёртку:

<template>
  <simplebar data-simplebar-auto-hide="false">
    <ul class='w-96 h-80 overflow-y-scroll position bg'>
      <ListItem
        v-for="item in list"
        v-bind:list="item"
        v-bind:key="item.index"
      />
    </ul>
  </simplebar>
</template>

<script>
import simplebar from 'simplebar-vue';
import 'simplebar/dist/simplebar.min.css';

import ListItem from "@/components/ListItem";
import '@/assets/fonts/font.css'
export default {
  props: ["list"],
  components: {
    ListItem,
    simplebar
  },
};
</script>

Но IDE подсвечивает следующую ошибку:

Could not find a declaration file for module 'simplebar-vue'. 'd:/Web/Front-end/Vue.js/list/node_modules/simplebar-vue/dist/simplebar-vue.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/simplebar-vue` if it exists or add a new declaration (.d.ts) file containing `declare module 'simplebar-vue';`Vetur(7016)

Подразумеваю, что именно из-за этого не работают стили, которые я применяю:

<style  scoped> .
    .simplebar-scrollbar {
      background-color: '#092740';
    }
</style>

Что я делаю не так?

Comments

[Danny Arty]

в ошибке же все написано

Try `npm i --save-dev @types/simplebar-vue`

Answer 1

[Юрий]

Не из-за этого. Во-первых, у вас в стилях непонятная лишняя точка сразу после открывающего <style scoped>, уберите её. Во-вторых, scoped стили по умолчанию не работают для вложенных компонентов, используйте v-deep

Comments

[Фёдор]

Я читал, что при таком синтаксисе style scoped должен быть всегда.

Получается что всё равно не работает. Либо я ещё не до конца понял, как оно должно работать.

.simplebar-scrollbar::v-deep {
      background-color: #fff;
    }

[Фёдор]

У брал класс overflow-y-scroll и получается, что в целом плагин не подключен. Так как не добавляется скролл к списку.