[SalesForce] Updates to Salesforce’s CSS not working in LWC

I have a lightning web component and on it I have

<lightning-input-field 
    field-name="Resource__c" 
    onchange={onResourceSelection} 
    data-lookup-id="temResourceLookup"
    value={resourceRecId}
    variant="label-hidden">
</lightning-input-field>

I want to change some of the styling so on the input and so I have this on the css portion of the component.

.slds-input:focus, .slds-input:active {
    outline: 0;
    border-color: rgb(255, 0, 0);
    background-color: rgb(255, 255, 0);
    box-shadow: 0 0 5px rgb(0, 255, 0);
}

Nothing changes. Does anyone know what I need to do to get the style to use the CSS I have supplied?

Best Answer

As @Mohith mentioned Styling hooks are the official way. You can achieve the same with

.slds-input:active{
    --lwc-colorBorderInputActive: rgb(255, 0, 0);
    --lwc-colorBackgroundInputActive: rgb(255, 255, 0);
    --lwc-shadowButtonFocus: 0 0 5px rgb(0, 255, 0);
}

Also, Styling hooks are still in beta so maybe there could be changes to the property conventions. Read more able SLDS Hooks here.

Related Solutions

[SalesForce] Overriding Salesforce CSS with custom CSS

If you want to override one sytle sheet over another you can use !important as shown below



    body { background-color: #F3F3EC !important; }

To change the entire look and feel of the standard salesforce page you can use jquery for that and to know which style element they use you can use firebug for Mozilla Firefox or by pressing F12 in Google Chrome.

[SalesForce] Lightning Component Styling is not working

The only thing I notice is the lack of spacing when you are scoping your CSS:

.THIS {
    background-color: lightblue;
}

.THIS .cus_button {
    margin-left: 200px;
}

.THIS .LSELabel {
     font-weight: bold;
}

therefore, the above css snippet should work, other than that, a few pointers.

Why dont you leverage lightning:input field instead of the force:inputField?

your component would change a bit, however, SF is pushing towards components in the lightning namespace.

<div class="slds-col slds-size_2-of-8">

    <lightning:input label="Name: " name="LIUI_ShowName" value="potato" />
    <lightning:input label="Rating" name="1" value="potato2"/>
    <br />
    <lightning:input label="Genre" name="2" value="potato3" />
    <br />
    <div class="cus_button">
    <lightning:buttonIcon  onclick="{!c.foo}" iconName="utility:save" variant="bare" size="large" alternativeText="Save" iconClass="dark"/> 
    </div>
</div>

and you would have to change your styling to the following:

.LSELabel --> .slds-form-element__label

Best Answer

Related Solutions

[SalesForce] Overriding Salesforce CSS with custom CSS

[SalesForce] Lightning Component Styling is not working

Related Topic