diff --git a/src/components/map-control-group/official-layer-control/index.tsx b/src/components/map-control-group/official-layer-control/index.tsx
index 6d4d915..983a6c9 100644
--- a/src/components/map-control-group/official-layer-control/index.tsx
+++ b/src/components/map-control-group/official-layer-control/index.tsx
@@ -216,7 +216,7 @@ export function OfficialLayerControl() {
                     alt=""
                     className={styles.amapInfoItemImage}
                   />
-                  <div style={{ marginTop: 0 }}>{item.title}</div>
+                  <div className={styles.amapInfoItemTitle} style={{ marginTop: 0 }}>{item.title}</div>
                 </div>
               );
             })}
diff --git a/src/components/map-control-group/official-layer-control/styles.ts b/src/components/map-control-group/official-layer-control/styles.ts
index 51b88ea..508109d 100644
--- a/src/components/map-control-group/official-layer-control/styles.ts
+++ b/src/components/map-control-group/official-layer-control/styles.ts
@@ -4,7 +4,7 @@ import { theme } from 'antd';
 const useStyle = () => {
   const { useToken } = theme;
   const { token } = useToken();
-  const { colorBgElevated, colorBgContainer } = token;
+  const { colorBgElevated, colorBgContainer, colorText } = token;
   return {
     mapTab: css`
       background-color: ${colorBgElevated};
@@ -64,6 +64,9 @@ const useStyle = () => {
         }
       }
     `,
+    amapInfoItemTitle: css`
+      color: ${colorText};
+    `,
     itemBorder: css`
       border: 2px solid ${colorBgContainer};
     `,