0

Below css not applying to my lwc map component. How to apply css to slds-coordinates?

I see it's working in aura. How to apply the same to lwc?

Scrollable Footer in lightning:map

css

    .slds-coordinates{
        display: flex;
        flex-wrap: wrap;
        max-height: 41.25rem !important;
        max-width: 20rem !important;
        color:red;
    }

html

    <lightning-map 
            map-markers={mapMarkers}
            markers-title={markersTitle}
    list-view=true></lightning-map>

js

    import { LightningElement } from 'lwc';
    
    export default class LightningExampleMapMultipleMarkers extends LightningElement {
        mapMarkers = [
            {
                location: {
                    City: "Cap-d'Ail",
                    Country: 'France',
                },
    
                icon: 'custom:custom26',
                title: "Cap-d'Ail",
            },
            {
                location: {
                    City: 'Beaulieu-sur-Mer',
                    Country: 'France',
                },
    
                icon: 'custom:custom96',
                title: 'Beaulieu-sur-Mer',
            },
            {
                location: {
                    City: 'Sainte-Maxime',
                    Country: 'France',
                },
    
                icon: 'custom:custom92',
                title: 'Sainte-Maxime',
            },
        ];
        markersTitle = "Côte d'Azur";
    } 

@muenzpraeger any idea?

1

I've found that overriding CSS of standard components can only be done by uploading a CSS file as a Static Resource and then load the Static Resource in the component.

  • I didnt find documentation for this - can you pls put the link if there is documentation? if there is no documentation, this may break anytime in future releases – salesforce-sas Aug 23 '19 at 3:24
  • To expand upon this a little bit, if @RavichandraSatti adds a custom CSS file for his component, because of the way different component's DOMs are isolated from one another, his parent company has no access to style the lightning-map component that is a child of his parent component. CSS on components is scoped to the component it is a part of. – nbrown Sep 14 '20 at 12:57

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.