0

I have created an LWC component and tested on local server. It was working fine. But when I deployed it to my scratch org, the code is working fine but CSS is not working. Below is my code for the LWC component

The Css file::

    .list-first {
    border-top: 1px solid #706e6b;
    padding-top: 5px;
}

.list-last {
    border-bottom: 1px solid #706e6b;
    padding-bottom: 5px;
}

ul {
    list-style: none;
    padding: 0;
}

The HTML file::

<template>
    <lightning-card title='HelloIterator'>
        <ul>
            <template iterator:it={details}>
                <li key={it.value.Id}>
                    <div if:true={it.first} key={it.value.Id} class = 'list-first'></div>
                    {it.value.name}, {it.value.designation}
                    <div if:true={it.last} class='list-last'></div>
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

The JS file ::

import { LightningElement } from 'lwc';

export default class HelloIterator extends LightningElement {
    details = [{Id: '003171931112854375',name: 'Amy Taylor', designation : 'VP of engineering'},
    {Id: '003171931112854377',name: 'Michael Jones', designation : 'VP of Sales'},
    {Id: '003171931112854366',name: 'Jennifer', designation : 'CEO'}
    ];
}

the screenshot from the local serve is enter image description here

and from the scratch org, the component seems to missed the CSS effects:(without the border lines)

enter image description here

Can anyone suggest what should i check here?

0

I'm not sure what to say, exactly. It's working in webcomponents.dev, too: link. It may be other, more specific CSS is being applied, so you might need to crank up the specificity by adding additional selectors to your style. You will want to inspect your component (right-click, Inspect Element), and then take a look at the elements generated and their calculated CSS. In most browsers, you'll see all the rules that affect an element in order of specificity, as well as which values are being overridden (shown by a "striked-out" font) to see what's causing the problem.

1
  • Thank you @sfdcfox . I'll try to go through the specificity and see if i can get it work. – mdanish9 May 30 at 15:02

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.