Mecitan
@Mecitan
Начинающий web-разработчик

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

Вечер добрый! Дошёл до задачи сделать кастомный скроллбар. Тут уже посоветовали пару библиотек для этого дела. Выбор пал на 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>

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы