How to edit vuetify 3 default typography styles? - vue.js

Question

I want to edit the default typography of vuetify 3, in which it's defined in a variables.scss file that is shown below inside the package itself.
$typography: map-deep-merge(
(
'h1': (
'size': 6rem,
'weight': 300,
'line-height': 6rem,
'letter-spacing': -.015625em,
'font-family': $heading-font-family,
'text-transform': none
),
'h2': (
'size': 3.75rem,
'weight': 300,
'line-height': 3.75rem,
'letter-spacing': -.0083333333em,
'font-family': $heading-font-family,
'text-transform': none
),
'h3': (
'size': 3rem,
'weight': 400,
'line-height': 3.125rem,
'letter-spacing': normal,
'font-family': $heading-font-family,
'text-transform': none
),
'h4': (
'size': 2.125rem,
'weight': 400,
'line-height': 2.5rem,
'letter-spacing': .0073529412em,
'font-family': $heading-font-family,
'text-transform': none
),
'h5': (
'size': 1.5rem,
'weight': 400,
'line-height': 2rem,
'letter-spacing': normal,
'font-family': $heading-font-family,
'text-transform': none
),
'h6': (
'size': 1.25rem,
'weight': 500,
'line-height': 2rem,
'letter-spacing': .0125em,
'font-family': $heading-font-family,
'text-transform': none
),
'subtitle-1': (
'size': 1rem,
'weight': normal,
'line-height': 1.75rem,
'letter-spacing': .009375em,
'font-family': $body-font-family,
'text-transform': none
),
'subtitle-2': (
'size': .875rem,
'weight': 500,
'line-height': 1.375rem,
'letter-spacing': .0071428571em,
'font-family': $body-font-family,
'text-transform': none
),
'body-1': (
'size': 1rem,
'weight': 400,
'line-height': 1.5rem,
'letter-spacing': .03125em,
'font-family': $body-font-family,
'text-transform': none
),
'body-2': (
'size': .875rem,
'weight': 400,
'line-height': 1.25rem,
'letter-spacing': .0178571429em,
'font-family': $body-font-family,
'text-transform': none
),
'button': (
'size': .875rem,
'weight': 500,
'line-height': 2.25rem,
'letter-spacing': .0892857143em,
'font-family': $body-font-family,
'text-transform': uppercase
),
'caption': (
'size': .75rem,
'weight': 400,
'line-height': 1.25rem,
'letter-spacing': .0333333333em,
'font-family': $body-font-family,
'text-transform': none
),
'overline': (
'size': .75rem,
'weight': 500,
'line-height': 2rem,
'letter-spacing': .1666666667em,
'font-family': $body-font-family,
'text-transform': uppercase
)
),
$typography
);
$flat-typography: () !default;
#each $type, $values in $typography {
$flat-typography: map-deep-merge(
$flat-typography,
(#{$type}: map.values($values))
);
}
What i want to achieve is for example change the h1 size to 32px, so that the default vuetify text-h1 class would automatically get the new 32px value.
I have tried overriding the vuetify classes themselves like (text-h1, text-h2 etc...) but it doesn't work since they all have !important property

Answer 1

create variables.scss in assets like bottom.
.v-application {
[class*= "-h1"] {
font-size: 32px !important;
}
}
and add this to vuetify plugin.
import "vuetify/styles";
import "#/assets/variables.scss" // add after vuetify default styles