dynamic checkout button "SHOP pay" css overwrite with shadow-root(closed)

[Darius90]

Hi Everyone,

noticed my custom css doesn't work anymore. Shopify started adding shop pay button with shadow-root. Not sure how to overwrite it. Tried with CSS and js. But no luck. Right now, it looks like this: 

[VIEKIN]

@Darius90 

I guess you familiar with code, so you can try with code here:

//host is the element that holds the shadow root:
var style = document.createElement( 'style' )
style.innerHTML = '.the-class-name { property-name: my-value; }'
host.shadowRoot.appendChild( style )

[Darius90]

I tried almost the same solution, but no luck. shadowRoot always empty(element is found) I guess the problem it could be with nesting and the difference between closed and open shadow-root. For me it looks like it should be simple solution with @Shopify  And it really strange that only me facing same issue. Html look like this: 

[Darius90 · Accepted solution]

To change the dynamic button height you need to add this code to your .css file 

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-block-size: max(48px);
}