Questions tagged [slds-styling-hooks]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
0 votes
0 answers
21 views

After Applied Custom Colors to a ShowToastEvent in LWC in console log changing the color, how can change in LWC JS or CSS style how can we apply

This is the code what i have tried. .slds-theme_success, .slds-theme--success { --slds-toast-color-background :rgb(29, 95, 216); } if (result.messageInSubscribe === 'Data Found in Both Master and ...
subba reddy's user avatar
0 votes
2 answers
79 views

LWC Treegrid how do I hide headers or columns

I'm having a hard time figuring out styling for the lightning-tree-grid. I want to implement this styling. and hide my id column. I tried adding classes to the grid and to columns but nothing happens. ...
afandre's user avatar
  • 71
0 votes
1 answer
62 views

Unable to Adjust Column Width Using Tree Grid

I am using a tree grid and in the column properties I have a column with the type: 'action' which renders a dropdown list with the list of typeAttributes I've specified. The issue I'm encountering is ...
user1718612's user avatar
0 votes
1 answer
27 views

Which SLDS CSS code is used to hide error text on file upload pop up?

Our client's Experience Cloud site has some CSS code that another consultant implemented, but since I cannot get in touch with them, I hope any of you can help me out. I am trying to figure out how to ...
Mille_B's user avatar
0 votes
1 answer
1k views

How can you style the lightning-output-field lwc component?

I am trying to style the output of a lighting-output-field component. <div class="slds-grid slds-gutters"> <div class="slds-grid slds-size_1-of-1"> <...
Valeriy Kutsar's user avatar
0 votes
0 answers
135 views

Styling inside datable header, in LWC Component

I have a datatable LWC element thatneeds to be responsive. So here it is in desktop an here in a cellphone screen size HTML (just the datatable) <lightning-combobox name="...
Luis Aguiar's user avatar
2 votes
1 answer
457 views

How to change disabled button text and background color using styling hooks?

I need to apply a background color to a disabled button, but the following did not work and no error is shown in the browser's console. Question Using styling hooks (mentioned here), how can I change ...
usernameabc's user avatar
1 vote
1 answer
2k views

Can We Apply Custom Colors to a ShowToastEvent?

I need to drop a simple LWC onto an existing Lightning Record page which just queries for some specific conditions between parent and child data, and if conditions are met, displays a toast message at ...
Morgan Marchese's user avatar
-2 votes
1 answer
410 views

LWC Data Table with a specific formatting

I am implementing lightning-datatable to view my data, but want a red border if closed date is passed. Please refer below screen shot for more details.
Akshay Gupta's user avatar
0 votes
1 answer
646 views

Using CSS styling hooks on lighting datatable rows

I want to increase the height of the rows in the lighting (I also want to change the spacing and add shadows)According to the documentation here. But I cant seem to target the row element of the ...
Sandeep Daniel's user avatar
1 vote
1 answer
342 views

Hiding the slds-slider-label__range on the lightning-slider

Got a number of LWC lightning-slider components. I want to hide the range label (span with class slds-slider-label__range). This won't work because of the shadow DOM... <div class="range-...
nstuyvesant's user avatar
2 votes
2 answers
1k views

How to vertically center LWC lightning-button icons to the button text

LWC lightning-button icons are too low relative to button label. For example... <lightning-button-group class="slds-m-top_x-small slds-m-bottom_x-small slds-align_right"> <...
nstuyvesant's user avatar
1 vote
1 answer
292 views

cellAttributes isn't working for a slds-class in lightning-datatable

I have the below column in a lightning datatable. I'm trying to remove the padding-right in the of the lightning datatable. I added this cellAttribute, but there is still a lot of space in the ...
Tom's user avatar
  • 152
0 votes
2 answers
562 views

LWC: slds styling hook not working on icon inside a lightning-datatable

I have a icon showing in my lightning-datatable using the cellAttributes property. But I want the icon to be green (instead of the default of grey). I followed the slds styling hooks documentation, ...
Tom's user avatar
  • 152
3 votes
1 answer
3k views

Lightning Datatable CellAttributes Dynamic Styling is not applied on change of Data Rows

We have created an LWC which uses the LWC Component 'Lightning Datatable' component to display a table with dynamic columns & rows. We would like to apply dynamic styling of the rows based on its ...
Wesley Van Wijnsberghe's user avatar
-1 votes
1 answer
568 views

LWC lightning-textarea dynamically change colors of words

I am trying to add colors to words that starts with '@' as I am typing in js for lightning-textarea. HTML <lightning-textarea class="cssClass" name="input1" label="write&...
kkJhn's user avatar
  • 23
0 votes
1 answer
1k views

add border radius to lightning-accordion header using styling hooks

I'm trying to add border-radius property to lightning-accordion-section header but the following syntax seems to work with background color but not with border radius. What is the right combination of ...
sam_s's user avatar
  • 966
1 vote
2 answers
618 views

Can accordions to have rounded corners?

I have tried CSS's border-radius and SLDS hooks on lightning-accordion and lightning-accordion-section, but I am unable to achieve rounded corners on it. I have changed the color to lightgray so I can ...
Tristan Berger's user avatar
0 votes
1 answer
662 views

How to target border-bottom-left-radius using Salesforce Styling Hooks?

I'm trying to target the input box ".slds-input" in the Salesforce lightning-input component. What is the correct syntax for border-bottom-left-radius using Salesforce Styling Hooks? I've ...
cpascua's user avatar
1 vote
1 answer
927 views

lightning-input checkbox margin-right

I have a custom table in LWC and standard margin of <lightning-input type="checkbox" variant="label-hidden" breaks cell center alignment. I ...
Karel L's user avatar
  • 344
4 votes
1 answer
2k views

How to set consistent styling across many LWCs using styling hooks?

This Style Components Using Lightning Design System Styling Hooks documentation illustrates how to set custom properties on an individual custom LWC to change the styling: /* myBaseButton.css */ :host ...
Keith C's user avatar
  • 136k
2 votes
1 answer
871 views

Remove box-shadow on Active Cell in datatable

I've been pouring over slds styling hook docs and datatable docs and I cannot figure out how to remove this box shadow when the cell has focus. I know for sure it's box shadow because when I uncheck ...
chinnc's user avatar
  • 21
1 vote
4 answers
3k views

lightning-tabset tab styling hooks don't work

Say I have a simple tabset: <lightning-tabset variant="vertical" active-tab-value={activeTabValue} class="tab-active"> <lightning-tab label="Dashboard" ...
dzh's user avatar
  • 4,106