'Open in Google Maps' button text is not clear in lightning-map component because of branding theme

Question

I am using lightning-map component , the footer button 'Open in google maps' text is not seen because of the brand theme we use. Unfortunately we cant change the branding theme. Is there a way to set the text color of 'Open in google maps' button ?

Answer 1

Use Styling Hooks to change the style of the Button. I have tried with the below example and it is working. Change the colors as per your requirement.

CSS

.my-css {
    --slds-c-button-brand-color-background: #9050e9; 
    --slds-c-button-brand-color-background-hover: #5a1ba9;
    --slds-c-button-brand-color-border: #9050e9; 
    --slds-c-button-brand-color-border-hover: #5a1ba9;
    --lwc-brandTextLink: #ffffff;
    --lwc-brandTextLinkActive: #ffffff;
  }

HTML

<lightning-map class="my-css"....

Output