type error when I custom css to my button

[BetterWorld-Liuser]

I have been using css below to custom native button element

.ui-button[type="primary"]{}

so this should be work

<button type="primary"></button>

but volar gives me a error like Type 'primary' cannot be assigned to type 'button' | 'submit' | 'reset' | undefined '.

the type define is in runtime-dom.d.ts like

export interface ButtonHTMLAttributes extends HTMLAttributes {
  autofocus?: Booleanish
  disabled?: Booleanish
  form?: string
  formaction?: string
  formenctype?: string
  formmethod?: string
  formnovalidate?: Booleanish
  formtarget?: string
  name?: string
  type?: 'submit' | 'reset' | 'button'
  value?: string | string[] | number
}

and the error is understandable, so I want to merge interface.

declare module "@vue/runtime-dom" {
  export interface ButtonHTMLAttributes extends HTMLAttributes {
    type?:
      | "normal"
      | "primary"
      | "remind"
      | "success"
      | "danger"
      | "error"
      | "submit";
  }
}

there is another error coming Subsequent property declarations must be of the same type. The type of attribute 'type' must be 'submit' | 'reset' | 'button' | undefined '

is there a solution for me to fix it?

[liulinboyi]

The error is because the button tag's type attribute is one of 'submit' | 'reset' | 'button' or don't provide.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type

I suggest use other attribute such as:

<button class="ui-button" btntype="primary"></button>

.ui-button[btntype="primary"]{
	
}

[BetterWorld-Liuser]

so there is no solution if I custom it in css?

[BetterWorld-Liuser]

ok, I got it, I will change my css code.

[liulinboyi]

so there is no solution if I custom it in css?

I only find the above method now😉, maybe other has other method.