material-web [mwc-button] outlined button --mdc-theme-primary will also set button text color

[mwc-button] outlined button --mdc-theme-primary will also set button text color, using --mdc-theme-on-primary won't set the text color. eg:

<body>
  <style>

    mwc-button[outlined] {
      --mdc-theme-primary: yellow;
      --mdc-theme-on-primary: black;
      --mdc-button-outline-color: red;
    }
    
  </style>
  <mwc-button outlined label="Button" unelevated></mwc-button>
  <mwc-button outlined label="Button"></mwc-button>
</body>

The button text is controlled by --mdc-theme-primary; and at unelevated state, the whole button will be yellow, with no text shown. I want an outlined unelevated button with different background color and text color.

Feb 14 '22 19:02 chxx-v

Screen Shot 2022-02-14 at 3 47 54 PM this will be my goal

Feb 14 '22 20:02 chxx-v

this will be my goal

@chxx-v you can override the CSS vars in your button element through the style attribute or via CSS class:

<mwc-button style="--mdc-theme-primary: black;"></mwc-button>

Feb 19 '22 20:02 maicol07

@maicol07 but when the option is selected, it will fill the whole background with black color, no text can be read...

Feb 22 '22 15:02 chxx-v

Fixed in M3

Apr 25 '23 04:04 asyncliz