pref: 排序相关代码 提交

+---
+title: 组件
+---
+
 ### 排序规则
 ### 排序规则
 
 
 ```tsx
 ```tsx

@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
 
 
 import { QxBaseIcon } from '../qx-base-icon/index';
 import { QxBaseIcon } from '../qx-base-icon/index';
 
 
+import './styles.less';
+
 const { Option } = Select;
 const { Option } = Select;
 
 
 type SortProps = {
 type SortProps = {
@@ -217,23 +219,21 @@ export const QxSortCondition: React.FC<QxSortConditionProps> = (props) => {
             })}
             })}
           </Select>
           </Select>
           <span
           <span
-            className={'qx-sort-condition-container__opt'}
+            className={'qx-sort-condition-container__operate'}
             style={{ margin: '-2px 0 0 .5em' }}
             style={{ margin: '-2px 0 0 .5em' }}
           >
           >
             <Button
             <Button
+              className={'operate-button'}
               size="small"
               size="small"
-              icon={
-                <QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-minus'} />
-              }
+              icon={<QxBaseIcon type={'qx-icon-minus'} />}
               disabled={sorts.length <= 1}
               disabled={sorts.length <= 1}
               onClick={() => removeSort(k)}
               onClick={() => removeSort(k)}
             />
             />
             &nbsp;
             &nbsp;
             <Button
             <Button
+              className={'operate-button'}
               size="small"
               size="small"
-              icon={
-                <QxBaseIcon style={{ fontSize: 16 }} type={'qx-icon-plus'} />
-              }
+              icon={<QxBaseIcon type={'qx-icon-plus'} />}
               disabled={
               disabled={
                 sorts.length >=
                 sorts.length >=
                 ((columns || []).length > 3 ? 3 : (columns || []).length)
                 ((columns || []).length > 3 ? 3 : (columns || []).length)

+@import '~@qx/ui/dist/src/style/variable.less';
+
+.qx-sort-condition-container {
+  &__operate {
+    .operate-button {
+      color: @N7;
+
+      &:disabled {
+        color: @N5;
+
+        &:hover {
+          color: @N5;
+        }
+      }
+
+      &:hover {
+        color: @B8;
+      }
+    }
+  }
+}