Format CSS for LWC Component within Aura Component

Question

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

Answer 1

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;
}

Answer 2

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.

UPDATE:

I haven't checked for myself, but I believe this markup is incorrectly structured - lightning-button does not support nested content. I suspect that because of this the button is automagically moved to be a sibling of the standard LWC component, and thus is actually part of the parent component's scope and can be styled directly as long as you understand that it doesn't have the lightning-button around it - it is one level higher in the DOM.

This theory fits with the solution suggested by the other answer.