diff --git a/packages/mdui/src/components/text-field/index.ts b/packages/mdui/src/components/text-field/index.ts
index 120c60fd..f0b49128 100644
--- a/packages/mdui/src/components/text-field/index.ts
+++ b/packages/mdui/src/components/text-field/index.ts
@@ -750,6 +750,8 @@ export class TextField
     const hasEndIcon =
       !!this.endIcon || this.hasSlotController.test('end-icon');
     const hasErrorIcon = this.invalid || this.invalidStyle;
+    const hasPrefix = !!this.prefix || this.hasSlotController.test('prefix');
+    const hasSuffix = !!this.suffix || this.hasSlotController.test('suffix');
     const hasHelper = !!this.helper || this.hasSlotController.test('helper');
     const hasError =
       hasErrorIcon && !!(this.error || this.inputRef.value!.validationMessage);
@@ -768,6 +770,8 @@ export class TextField
       'has-icon': hasIcon,
       'has-end-icon': hasEndIcon,
       'has-error-icon': hasErrorIcon,
+      'has-prefix': hasPrefix,
+      'has-suffix': hasSuffix,
       'is-firefox': navigator.userAgent.includes('Firefox'),
       ...invalidClassNameObj,
     });
diff --git a/packages/mdui/src/components/text-field/style.less b/packages/mdui/src/components/text-field/style.less
index 0184c384..cd2f1261 100644
--- a/packages/mdui/src/components/text-field/style.less
+++ b/packages/mdui/src/components/text-field/style.less
@@ -177,11 +177,11 @@
   }
 }
 
-.prefix {
+.has-prefix .prefix {
   .padding-right(2);
 }
 
-.suffix {
+.has-suffix .suffix {
   .padding-left(2);
 }