0

I have a a LWC component displaying within a Aura Component. The LWC is the "Create Jira Ticket" button, and the Aura Component contains all 4 of these buttons: enter image description here

I would like the "Create Jira Ticket" button width to match the "Take Ownership" button width, so it looks like this:

enter image description here

When editing the css file, the changes I make apply to the outer "lightning-button" element, but not to the "button" child element. I need to apply css to the child element in order to make the width match for the buttons. Below is the HTML I get from the dev console when loading the page.

<lightning-button c-generatejiraticketcase_generatejiraticketcase="" class="fixed-button-width slds-button">
  <button name="createJiraTicket" type="submit" class="slds-button slds-button_neutral" style="
   min-width: 150px;">Create Jira Ticket</button>
</lightning-button>

I tried overwriting the classes slds-button and slds-button_neutral but that didn't work, I'm guessing because those are lightning classes. I also tried using a child selector in the css file like this: lightning-button > button, but that didn't work.

css:

.fixed-button-width {
    min-width: 150px;
    background-color: black;
}

html:

<template>
    <lightning-button
                      class={buttonClass} <!--Sets class to: fixed-button-width slds-button-->
                      type="submit"
                      disabled={disable}
                      name="createJiraTicket"
                      label="Create Jira Ticket"
                      onclick={onCreateTicket}>
    </lightning-button>

    <lightning-spinner class={showHideSpinner} size="small">
    </lightning-spinner>
</template>

Does anyone know how I could access the child button element? I've tried using child selectors but couldn't get that to work

0
0

Well, you can apply CSS to the child LWC directly from your parent AURA Component. Simply,

.THIS button{
width: 150px;
}

This should apply to the child LWC button too! Or you can change the lightning-button to

<button class="slds-button slds-button__brand fixed-width">Create a JIRA ticket></button>

And,

.fixed-width{
width: 150px !important;
}
2
  • It won't because of Shadow DOM. The edit won't work either since custom CSS doesn't apply to the content of the standard LWC. – Phil W Oct 21 '20 at 20:25
  • 1
    @Sachin Hooda I think this works, just confirming and will mark it as the answer. Thanks for the help! – Tom Oct 21 '20 at 20:28
0

Standard LWC components that support "class" only support SLDS classes against their content. Any non-SLDS classes applied appear on their container element but typically have little or no effect other than to allow you to find elements by class name or to add exterior styling (around the outside of the component). This is due to the fact that all their "content" is actually rendered in a Shadow DOM and therefore isolated from any CSS applied within their parent.

If you want to do this sort of thing you should look to use explicit SLDS sizing, which is documented here. You may want to combine this with use of a grid in which to place the set of buttons.

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.