How to apply active-class prop in Vuetify component - vue.js

Question

Below was the old question, I realize the issue is not with the custom properties, but rather I have a component like the below, and 'active-class' is not being applied.
I tried to change the prop name to activeClass, doesn't seem to be working
<VListGroup
key={item.text}
class='drawer-item'
active-class='drawer-active-item'
>
I'm working on a new project using Vue, and trying to convert some old components (.vue) files to be using render functions and typescript (.tsx), and trying to separate the style contained in the <style/> blocks into a separate .less file.
While the template syntax, v-if and all can be converted quite easily, however I'm stuck on the part where if my style contains customProperties, https://vuetifyjs.com/en/features/theme/#custom-properties]]
specifically --v-primary-base, as the below
I have the below
.drawer-active-item {
color: white;
&::before {
background-color: var(--v-primary-base);
opacity: 1;
}
&:hover::before {
opacity: 0.8;
}
&::after {
background-color: var(--v-primary-base);
opacity: 1;
}
&:hover::after {
background-color: var(--v-primary-base);
opacity: 0.8;
}
}
Is there a way to access these custom css variables from the .less file? I've been googling things like 'access customProperties in less file` and things related, but I feel like perhaps I'm not asking the right question, or looking at the right resource for what I'm trying to achieve, pointers would be great, thank you.
I have a theme config that currently looks like the below, just for some context.
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';
Vue.use(Vuetify);
export default new Vuetify({
icons: {
iconfont: 'md',
},
theme: {
options: {
customProperties: true,
},
themes: {
light: {
primary: colors.blue.darken3,
},
dark: {
primary: colors.blue.darken3,
anchor: colors.blue.base,
},
},
},
});