One of the components in my project is an Img component, which includes a figure with a nested image element:
<figure>
<img @dragstart="stopDrag" :src="src" />
</figure>
When using this component within another component, I am attempting to override the styling of the inner image from the parent. However, while the figure receives the new styles successfully, the inner image does not.
<template>
<List>
<li class="gridItem">
<Img :src="require('@/assets/images/girl.png')" />
</li>
</List>
<template>
...
<style scoped lang="scss">
.gridItem {
& figure {
width: 100%;
height: 100%;
//I did try & >>> img, and it didn't work.
& img {
width: auto;
}
}
}
</style>
If you'd like to take a closer look at the issue, feel free to check out the current version of the project on my Github repository: Github Repo