silencesys / silentbox

A lightbox inspired Vue.js component.
https://silentbox.rocek.dev
MIT License
296 stars 50 forks source link

Doesn't work in scoped styles #67

Open mxrch opened 1 year ago

mxrch commented 1 year ago

When using it in a component with styled scope, ex :

<script scoped>
    export default {
        name: "Test",
        data() {
            return {
                images: [
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp'
        },
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(74).webp'
        },
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(75).webp'
        },
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(76).webp'
        },
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(77).webp'
        },
        {
            src: 'https://tecdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(78).webp'
        }]
            };
        }
    }
</script>

<style scoped>
    @import 'vue-silentbox/dist/style.css';
</style>

<template>
    <silent-box :gallery="images"></silent-box>
</template>

The images are present in the HTML but there is an issue with the CSS, that makes them invisible.

silencesys commented 1 year ago

Thanks for the report, I'll look into it over the weekend.