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:
I would like the "Create Jira Ticket" button width to match the "Take Ownership" button width, so it looks like this:
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