1

Now that LWC can be built locally I'm trying to create a simple data table but CSS won't apply. I'm sure I'm doing something wrong while importing or referencing the SLDS CSS file. Can someone please help me out here?

Here's what I have done so far:

index.html

<head>
<style lang="css">
    @import '/resources/salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.css';
    </style>
</head>
<body>
    <my-app></my-app>
</body>

app.html

<div class="center">
        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
            <thead>
                <tr class="slds-line-height_reset">
                    <th class="" scope="col">
                        <div class="slds-truncate" title="First Name">First Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Last Name">Last Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Email">Email</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <template iterator:it={students}>
                    <tr key={it.value.id} class="slds-hint-parent">
                        <td data-label="First Name">
                            <div class="slds-truncate">{it.value.first_name}</div>
                        </td>
                        <td data-label="Last Name">
                            <div class="slds-truncate">{it.value.last_name}</div>
                        </td>
                        <td data-label="Email">
                            <div class="slds-truncate">{it.value.email}</div>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

Here's a screenshot of my 'app' (notice the blue background that appears when css is referenced) :

enter image description here

Here's my directory structure:

enter image description here

Please let me know if you need more info. Thanks!

Improve this question

1 Answer 1

Reset to default
0

That is a duplicate of this Post

You are loading the css styles top level - your component styles are encapsulated via shadow dom semantics. You either have to inline styles in your web components or import the styles there too (which is more a kind of "unsupported" workaround for now i guess - Salesforce is considering to add support for the @import tag for thatr).

Improve this answer

You must log in to answer this question.

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