Utilizing the Oruga and Storybook libraries for creating Vue 3 components.
The code in the Vue file looks like this:
<template>
<o-radio v-bind="$props" v-model="model">
<slot />
</o-radio>
</template>
<script lang="ts">
import { defineComponent } from "@vue/runtime-core";
import Radio from '../mixins/radio-mixins';
export default defineComponent({
name: "BaseRadio",
computed: {
model: {
get() {
return this.$props.nativeValue;
},
set(value: any) {
this.$emit("input", value);
},
},
},
emits: ["input"],
props: {
...Radio.props,
},
});
</script>
<style scoped>
.b-radio.radio.is-primary .check:checked {
border-color: var(--color-blue);
}
.b-radio.radio.is-primary .check:checked:focus {
box-shadow: 0 0 3px 3px var(--color-light-blue);
}
.b-radio.radio.is-primary .check:before {
background: var(--color-blue);
}
</style>
Within the <style> tag, I am adjusting the classes provided by the Oruga library to achieve the desired styling.
The issue arises when using the scoped attribute in the <style> tag, causing none of the styles to be applied. Removing scoped allows the styles to work as intended.
Is there a way to resolve this problem? I need to apply these styles while still utilizing the scoped tag in the <style>.