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"

.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;

1 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.

  • Thank you for the info! Jul 29, 2021 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.