diff --git a/client/ui/dialog/LoginDialog.tsx b/client/ui/dialog/LoginDialog.tsx
index da3ec77..005e1e0 100644
--- a/client/ui/dialog/LoginDialog.tsx
+++ b/client/ui/dialog/LoginDialog.tsx
@@ -20,8 +20,8 @@ export default function LoginDialog({
     loginDialogRef,
     registerDialogRef
 }: Refs) {
-    const loginButtonRef: React.MutableRefObject<Button | null> = React.useRef(null)
-    const registerButtonRef: React.MutableRefObject<Button | null> = React.useRef(null)
+    const loginButtonRef = React.useRef<Button>(null)
+    const registerButtonRef = React.useRef<Button>(null)
     useEventListener(registerButtonRef, 'click', () => registerDialogRef.current!.open = true)
     useEventListener(loginButtonRef, 'click', async () => {
         const account = loginInputAccountRef.current!.value
@@ -41,11 +41,11 @@ export default function LoginDialog({
     return (
         <mdui-dialog headline="登錄" ref={loginDialogRef}>
 
-            <mdui-text-field label="用戶 ID / 用戶名" ref={loginInputAccountRef}></mdui-text-field>
+            <mdui-text-field label="用戶 ID / 用戶名" ref={loginInputAccountRef as any}></mdui-text-field>
             <div style={{
                 height: "10px",
             }}></div>
-            <mdui-text-field label="密碼" type="password" toggle-password ref={loginInputPasswordRef}></mdui-text-field>
+            <mdui-text-field label="密碼" type="password" toggle-password ref={loginInputPasswordRef as any}></mdui-text-field>
 
             <mdui-button slot="action" variant="text" ref={registerButtonRef}>注册</mdui-button>
             <mdui-button slot="action" variant="text" ref={loginButtonRef}>登录</mdui-button>
diff --git a/client/ui/dialog/RegisterDialog.tsx b/client/ui/dialog/RegisterDialog.tsx
index 02c52b9..e5c4502 100644
--- a/client/ui/dialog/RegisterDialog.tsx
+++ b/client/ui/dialog/RegisterDialog.tsx
@@ -23,8 +23,8 @@ export default function RegisterDialog({
     registerInputPasswordRef,
     registerDialogRef
 }: Refs) {
-    const registerBackButtonRef: React.MutableRefObject<Button | null> = React.useRef(null)
-    const doRegisterButtonRef: React.MutableRefObject<Button | null> = React.useRef(null)
+    const registerBackButtonRef = React.useRef<Button>(null)
+    const doRegisterButtonRef = React.useRef<Button>(null)
     useEventListener(registerBackButtonRef, 'click', () => registerDialogRef.current!.open = false)
     useEventListener(doRegisterButtonRef, 'click', async () => {
         const username = registerInputUserNameRef.current!.value
@@ -50,15 +50,15 @@ export default function RegisterDialog({
     return (
         <mdui-dialog headline="注冊" ref={registerDialogRef}>
 
-            <mdui-text-field label="用戶名 (可選)" ref={registerInputUserNameRef}></mdui-text-field>
+            <mdui-text-field label="用戶名 (可選)" ref={registerInputUserNameRef as any}></mdui-text-field>
             <div style={{
                 height: "10px",
             }}></div>
-            <mdui-text-field label="昵稱" ref={registerInputNickNameRef}></mdui-text-field>
+            <mdui-text-field label="昵稱" ref={registerInputNickNameRef as any}></mdui-text-field>
             <div style={{
                 height: "10px",
             }}></div>
-            <mdui-text-field label="密码" type="password" toggle-password ref={registerInputPasswordRef}></mdui-text-field>
+            <mdui-text-field label="密码" type="password" toggle-password ref={registerInputPasswordRef as any}></mdui-text-field>
 
             <mdui-button slot="action" variant="text" ref={registerBackButtonRef}>返回</mdui-button>
             <mdui-button slot="action" variant="text" ref={doRegisterButtonRef}>注冊</mdui-button>