How to make friends Vue.js and the Simplebar library?

Question

Vue.js

Good evening! I got to the task of making a custom scrollbar. A couple of libraries for this case have already been advised here. The choice fell on Simplebar. Installed it via npm. Added wrapper:

<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>

But the IDE highlights the following error:

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)

I mean that it is because of this that the styles that I apply do not work:

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

What am I doing wrong?

Answer 1

Not because of this. Firstly, you have an incomprehensible extra dot in your styles right after the opening <style scoped>, remove it. Second, default scoped styles don't work for nested components, use v-deep