diff --git a/script/generate-css-vars.js b/script/generate-css-vars.js
index c8119433..c598f538 100644
--- a/script/generate-css-vars.js
+++ b/script/generate-css-vars.js
@@ -45,8 +45,8 @@ const matchReg = /(?<=var).*?(?=;)/g;
 const cssVariableHeadContent = `\n\n### CSS Variables\n\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`;
 const cssVariableHeadContentEn = `\n\n### CSS Variables\n\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`;
 
-fs.appendFileSync(resolveCwd(`src/_common/docs/mobile/api/${COMPONENT_NAME}.md`), cssVariableHeadContent);
-fs.appendFileSync(resolveCwd(`src/_common/docs/mobile/api/${COMPONENT_NAME}.en-US.md`), cssVariableHeadContentEn);
+fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.md`), cssVariableHeadContent);
+fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.en-US.md`), cssVariableHeadContentEn);
 
 // 读取 less 文件内容
 lessPath.forEach((item) => {
@@ -65,8 +65,9 @@ lessPath.forEach((item) => {
         )} | - \n`;
       });
 
-      fs.appendFileSync(resolveCwd(`src/_common/docs/mobile/api/${COMPONENT_NAME}.md`), cssVariableBodyContent);
-      fs.appendFileSync(resolveCwd(`src/_common/docs/mobile/api/${COMPONENT_NAME}.en-US.md`), cssVariableBodyContent);
+      // src/notice-bar/notice-bar.en-US.md
+      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.md`), cssVariableBodyContent);
+      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.en-US.md`), cssVariableBodyContent);
     });
   }
 });
diff --git a/src/notice-bar/notice-bar.en-US.md b/src/notice-bar/notice-bar.en-US.md
index 8ad8a151..30d9a6de 100644
--- a/src/notice-bar/notice-bar.en-US.md
+++ b/src/notice-bar/notice-bar.en-US.md
@@ -20,3 +20,21 @@ visible | Boolean | false | \- | N
 defaultVisible | Boolean | false | uncontrolled property | N
 onChange | Function |  | Typescript：`(value: boolean) => void`<br/>`deprecated` | N
 onClick | Function |  | Typescript：`(trigger: NoticeBarTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/> | N
+
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-notice-bar-error-bg-color | @error-color-1 | - 
+--td-notice-bar-error-color | @error-color-6 | - 
+--td-notice-bar-font-color | @text-color-primary | - 
+--td-notice-bar-info-bg-color | @brand-color-light | - 
+--td-notice-bar-info-color | @brand-color | - 
+--td-notice-bar-operation-font-color | @brand-color | - 
+--td-notice-bar-success-bg-color | @success-color-1 | - 
+--td-notice-bar-success-color | @success-color | - 
+--td-notice-bar-suffix-icon-color | @text-color-placeholder | - 
+--td-notice-bar-warning-bg-color | @warning-color-1 | - 
+--td-notice-bar-warning-color | @warning-color | - 
diff --git a/src/notice-bar/notice-bar.md b/src/notice-bar/notice-bar.md
index a41b6a35..ee4d05d8 100644
--- a/src/notice-bar/notice-bar.md
+++ b/src/notice-bar/notice-bar.md
@@ -20,3 +20,21 @@ visible | Boolean | false | 显示/隐藏 | N
 defaultVisible | Boolean | false | 显示/隐藏。非受控属性 | N
 onChange | Function |  | TS 类型：`(value: boolean) => void`<br/>已废弃。展示或关闭公告栏时触发。参数为true时，代表展示公告栏。参数为false时，代表关闭公告栏 | N
 onClick | Function |  | TS 类型：`(trigger: NoticeBarTrigger) => void`<br/>点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/> | N
+
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-notice-bar-error-bg-color | @error-color-1 | - 
+--td-notice-bar-error-color | @error-color-6 | - 
+--td-notice-bar-font-color | @text-color-primary | - 
+--td-notice-bar-info-bg-color | @brand-color-light | - 
+--td-notice-bar-info-color | @brand-color | - 
+--td-notice-bar-operation-font-color | @brand-color | - 
+--td-notice-bar-success-bg-color | @success-color-1 | - 
+--td-notice-bar-success-color | @success-color | - 
+--td-notice-bar-suffix-icon-color | @text-color-placeholder | - 
+--td-notice-bar-warning-bg-color | @warning-color-1 | - 
+--td-notice-bar-warning-color | @warning-color | -