1

Trying to apply some basic CSS to a button on my LWC and can't seem to get it to apply. I followed all the basic guidelines in terms of containing the CSS file within the same folder as my LWC. It deploys without issue

=== Deployed Source
STATE  FULL NAME                     TYPE                      PROJECT PATH                                                  
─────  ────────────────────────────  ────────────────────────  
──────────────────────────────────────────────────────────────
Add    pcMaterials\pcMaterials.css   LightningComponentBundle  force- 
app\main\default\lwc\pcMaterials\pcMaterials.css

Add    pcMaterials\pcMaterials.html  LightningComponentBundle  force- 
app\main\default\lwc\pcMaterials\pcMaterials.html     

Add    pcMaterials\pcMaterials.js    LightningComponentBundle  force- 
app\main\default\lwc\pcMaterials\pcMaterials.js  

Add    pcMaterials\pcMaterials.js    LightningComponentBundle  force- 
app\main\default\lwc\pcMaterials\pcMaterials.js-meta.xml

It has the same name as the LWC so it should be applied automatically (at least according to the documentation

HTML File

<template>
   <lightning-card   variant="narrow"
                  icon-name="standard:opportunity"
                  title="PC Materials">
    <lightning-button label="New" slot="actions" class="normalField"> 
    </lightning-button>
    <lightning-button label="All"></lightning-button>
    <lightning-button label="My Materials" onclick={handleClick}></lightning- 
    button>
        <!--<lightning-input type="search"
        onchange={handleSearchTermChange}
        variant="label-hidden"
        class="slds-m-bottom_small"
        label="Search"
        placeholder="Search"
        value={searchTerm}>
        </lightning-input>-->
        <lightning-datatable
            key-field="id"
            data={aidata}
            hide-checkbox-column = true
            columns={columns}
            onsave={handleSave}>
        </lightning-datatable>
   </lightning-card>
</template>

CSS File

.normalField {
    color: red;
    background: red;
}
3

The CSS is being "applied", but the problem is that you can't modify most attributes of a component because of the Shadow DOM. This means that you can, for example, set the border of a component, or its width and height, but you can't change its font color or other attributes. You'll want to read more about the current limitations for CSS styles in components. The only allowed color changes are to use the variant attribute to change the color. For example, you could say:

<lightning-button label="New" slot="actions" variant="destructive"></lightning-button>

Check the documentation for other possible variants.

If you need greater control than what's allowed by the component, you'll need to write your own instead. You can use lightning buttons from SLDS to get started.

| improve this answer | |
  • bit frustrating but makes sense in the longrun. Thought the switch to component specific CSS would allow more functionality in that regard, not less – Bobbygllh Oct 8 '19 at 17:55
0

Set your lightning-button variant to base. By default, a button's variant is neutral and that sets the background to be white which is overriding the CSS applied in some way.

See an example in the playground here: https://developer.salesforce.com/docs/component-library/tools/playground/AX7c7dCxd/1/edit

This all being said, if you need to totally customize your button, don't use the lightning-button component and instead use an HTML button or create your own button component.

| improve this answer | |

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.