diff --git a/packages/components/page-header/src/page-header.vue b/packages/components/page-header/src/page-header.vue
index 7adb13dd51..7510536fa5 100644
--- a/packages/components/page-header/src/page-header.vue
+++ b/packages/components/page-header/src/page-header.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="el-page-header">
-    <div class="el-page-header__left" @click="handleClick">
-      <div v-if="icon || $slots.icon" class="el-page-header__icon">
+  <div :class="ns.b()">
+    <div :class="ns.e('left')" @click="handleClick">
+      <div v-if="icon || $slots.icon" :class="ns.e('icon')">
         <slot name="icon">
           <el-icon v-if="icon"><component :is="icon" /></el-icon>
         </slot>
       </div>
-      <div class="el-page-header__title">
+      <div :class="ns.e('title')">
         <slot name="title">{{ title || t('el.pageHeader.title') }}</slot>
       </div>
     </div>
-    <div class="el-page-header__content">
+    <div :class="ns.e('content')">
       <slot name="content">{{ content }}</slot>
     </div>
   </div>
@@ -19,7 +19,7 @@
 import { defineComponent } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 
-import { useLocale } from '@element-plus/hooks'
+import { useLocale, useNamespace } from '@element-plus/hooks'
 import { pageHeaderEmits, pageHeaderProps } from './page-header'
 
 export default defineComponent({
@@ -34,6 +34,7 @@ export default defineComponent({
 
   setup(_, { emit }) {
     const { t } = useLocale()
+    const ns = useNamespace('page-header')
 
     function handleClick() {
       emit('back')
@@ -42,6 +43,7 @@ export default defineComponent({
     return {
       handleClick,
       t,
+      ns,
     }
   },
 })