diff --git a/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less b/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less
index 36f4e1d18..8c3341261 100644
--- a/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less
+++ b/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less
@@ -3,6 +3,7 @@
   background: #52c41a;
   background-color: #faad14;
   border-color: #ff4D4F;
+  scrollbar-color: #ffffff;
   .content {
     color: rgba(0, 0, 0, 0.85);
     background: rgba(0, 0, 0,0.65);
diff --git a/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less b/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less
index 4f25e105d..1acebede9 100644
--- a/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less
+++ b/packages/codemod/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less
@@ -4,6 +4,7 @@
   background: @colorSuccess;
   background-color: @colorWarning;
   border-color: @colorError;
+  scrollbar-color: @colorBgContainer;
   .content {
     color: @colorText;
     background: @colorTextSecondary;
diff --git a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js
index 4df0d41f5..efdd1077f 100644
--- a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js
+++ b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.input.js
@@ -5,7 +5,7 @@ const Demo = () => {
   return (
     <div>
       <Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9' }} />
-      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F' }}></Button>
+      <Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', scrollbarColor: '#ffffff' }}></Button>
     </div>
   );
 };
diff --git a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
index 9da081622..535ed9177 100644
--- a/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
+++ b/packages/codemod/transforms/__testfixtures__/style-to-token/function-component.output.js
@@ -6,7 +6,7 @@ const Demo = () => {
   return (
     (<div>
       <Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}` }} />
-      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError }}></Button>
+      <Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, scrollbarColor: token.colorBgContainer }}></Button>
     </div>)
   );
 };
diff --git a/packages/codemod/transforms/utils/token.js b/packages/codemod/transforms/utils/token.js
index 135b9d5b3..716034c23 100644
--- a/packages/codemod/transforms/utils/token.js
+++ b/packages/codemod/transforms/utils/token.js
@@ -14,8 +14,9 @@ const TOKEN_MAP = {
   '#bfbfbf': 'colorBorder',
   '#f0f2f5': 'colorBgLayout',
   '#fafafa': 'colorBgLayout',
-  '#fff': 'colorBgContainer',
+  // priority should be #ffffff > #fff to avoid bad case: '#ffffff' => `${token.colorBgContainer}fff`
   '#ffffff': 'colorBgContainer',
+  '#fff': 'colorBgContainer',
   'rgba(0,0,0,0.85)': 'colorText',
   'rgba(0,0,0,0.65)': 'colorTextSecondary',
   'rgba(0,0,0,0.45)': 'colorTextTertiary',