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?

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
2
  • 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
    Commented Aug 23, 2019 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
    Commented Sep 14, 2020 at 12:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .