Apex Chart CSS variables not applying

3rd Party Modules
1

I have tried to apply some basic CSS overrides using a custom theme, and have successfully set the title text color, and gridline color using the following CSS overrides:

/* Define common apexcharts styling that makes default charts look better in all themes */
.apexcharts-gridline {
    stroke: var(--neutral-70);
}
.apexcharts-xaxis-tick {
    stroke: var(--neutral-70);
}
.apexcharts-yaxis-tick {
    stroke: var(--neutral-70);
}

/* Set grid rows fill color to transparent across the board */
.apexcharts-grid-row {
    fill: transparent;
}
/* Ensure all text is based off theme neutral varibles so it works with light & dark themes */
.apexcharts-title-text {
    fill: var(--neutral-100);
}

However I can't get the following working, even after drilling down in the browser using developer tools to find the appropriate classes.

/* CAN'T GET THESE WORKING */
.apexcharts-text apexcharts-yaxis-label {
    fill: var(--neutral-80);
}
.apexcharts-text apexcharts-yaxis-title-text {
    fill: var(--neutral-80);
}

.apexcharts-yaxis-title {
    fill: var(--neutral-100);
}
.apexcharts-yaxis-text-g{
    fill: var(--neutral-80);
}
.apexcharts-xaxis-title {
    fill: var(--neutral-100);
}
.apexcharts-xaxis-text-g{
    fill: var(--neutral-80);
}

image
image874×476 60 KB

Any help would be much appreciated. I really don't want to have to bind some of these things to the chart options Style properties on every Apex Chart i create.
I can't quite figure out why some of the CSS overrides work and some don't.. I'm sure it is something silly.

2

I think the CSS !important rule just became my friend..

3

Also needed a full stop between classes such as:

.apexcharts-text apexcharts-xaxis-label {
    fill: var(--neutral-80) !important;
}

SHOULD BE:

.apexcharts-text.apexcharts-xaxis-label {
    fill: var(--neutral-80) !important;
}