Change slds radiogroup text

Question

I am looking for how to change text color and font for the lightning-radio-group standard component. The hooks work properly, but the rest of CSS doesn't work. And I haven't found hooks for text. Could you please help me?

Code that I have:

<lightning-radio-group  type="radio"
                                    options={radioData}
                                    onchange={handleRadioChange}
                                    class="radio-group"></lightning-radio-group>

.radio-group {
    --sds-c-radio-mark-color-foreground: #9300EA;
    --sds-c-radio-color-border-focus: #9300EA;
    --sds-c-radio-color-border-checked: #9300EA;
    color: black;
    font-size: 16px;
}

.radio-group .slds-form-element__label {
    color: black;
    font-family: sans-serif;
    font-size: 16px;
}

Answer 1

You can only override properties that have hooks. This is because the Shadow DOM specifically prevents components from overriding other components' styles. The documentation says:

CSS styles defined in a parent component don’t leak into a child. In our example, a p style defined in the todoApp.css style sheet doesn’t style the p element in the c-todo-item component, because the styles don’t reach into the shadow tree. See CSS.

This is, in fact, why CSS hooks exist in the first place, to allow some theming capabilities.