Mdthbs

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    pcMaterialspcMaterials.css   LightningComponentBundle  force- 

appmaindefaultlwcpcMaterialspcMaterials.css



Add    pcMaterialspcMaterials.html  LightningComponentBundle  force- 

appmaindefaultlwcpcMaterialspcMaterials.html     



Add    pcMaterialspcMaterials.js    LightningComponentBundle  force- 

appmaindefaultlwcpcMaterialspcMaterials.js  



Add    pcMaterialspcMaterials.js    LightningComponentBundle  force- 

appmaindefaultlwcpcMaterialspcMaterials.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;

}

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.

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.