My Vue component is quite basic, with the following structure:
<script>
export default {
props: {
source: {
type: String,
required: true,
}
},
}
</script><template>
<div class="imageItem">
<img class="image" :data-srcset="source" />
<p> this is some text </p>
</div>
</template>One challenge I'm facing is customizing the component styles when loading it in the parent component like this:
<imageItem :source="source" />
I would like to have the ability to customize the component styles, for example by changing the text color:
<imageItem :source="source" :textColor="red" />
I've tried using props for this purpose but it's not working as expected. Can someone provide guidance on the correct approach to achieve this?