fix: 选择组件样式问题

packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/index.tsx

@@ -61,19 +61,18 @@ const Internal = (props: ColorRangeSelectorProps) => {
 
         return (
           <Select.Option key={colorList.toString()} value={colorList.toString()}>
-            <div className={`${prefixCls}__selection-item`}>
-              {colorList.map((color) => (
-                <span
-                  key={color}
-                  className={`${prefixCls}__selection-item-color`}
-                  style={{
-                    backgroundColor: color,
-                    height: '22px',
-                    width: `${100 / colorList.length}%`,
-                  }}
-                />
-              ))}
-            </div>
+            {colorList.map((color) => (
+              <span
+                key={color}
+                className={`${prefixCls}__selection-item-color`}
+                style={{
+                  backgroundColor: color,
+                  height: '22px',
+                  width: `${100 / colorList.length}%`,
+                  display: 'inline-block',
+                }}
+              />
+            ))}
           </Select.Option>
         );
       })}

packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/style.ts

@@ -7,6 +7,12 @@ export default genStyleHook('color-range-selector', (token) => {
     [componentCls]: {
       maxWidth: 260,
 
+      [`${antCls}-select-selection-item`]: {
+        span: {
+          marginTop: 10,
+        },
+      },
+
       [`${componentCls}__selection-item`]: {
         display: 'flex',
         alignItems: 'center',

packages/li-p2/src/components/Formily/ControlPositionSelect/Select/index.tsx

@@ -1,30 +1,13 @@
 /* eslint-disable react/no-array-index-key */
-import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import type { SelectProps } from 'antd';
 import { Select } from 'antd';
-import cls from 'classnames';
 import React from 'react';
 import { POSITION } from './contants';
-import useStyle from './style';
 
 const PositionSelect: React.FC<SelectProps> = (props) => {
   const { options, ...prop } = props;
-  const prefixCls = usePrefixCls('formily-position-select');
-  const [wrapSSR, hashId] = useStyle(prefixCls);
 
-  return wrapSSR(
-    <Select {...prop} popupClassName={cls(`${prefixCls}`, hashId)}>
-      {(options ?? POSITION).map((item, index) => {
-        return (
-          <Select.Option value={item.value} key={index}>
-            <div className={cls(`${prefixCls}-item`, hashId)}>
-              <span>{item.label}</span>
-            </div>
-          </Select.Option>
-        );
-      })}
-    </Select>,
-  );
+  return <Select {...prop} options={options ?? POSITION} />;
 };
 
 export default PositionSelect;

packages/li-p2/src/components/Formily/FieldSelect/Select/index.tsx

@@ -61,14 +61,12 @@ const InternalSelect: React.FC<SelectProps<string, FieldSelectOptionType>> = (pr
       {options?.map((item, index) => {
         return (
           <Select.Option value={item.value} key={index}>
-            <div className={cls(`${prefixCls}-item`, hashId)}>
-              {isUndefined(item.type) ? (
-                <Tag>未知</Tag>
-              ) : (
-                <Tag color={item.typeColor}>{isUndefined(item.typeName) ? item.type : item.typeName}</Tag>
-              )}
-              <span title={item.label}>{item.label}</span>
-            </div>
+            {isUndefined(item.type) ? (
+              <Tag>未知</Tag>
+            ) : (
+              <Tag color={item.typeColor}>{isUndefined(item.typeName) ? item.type : item.typeName}</Tag>
+            )}
+            <span title={item.label}>{item.label}</span>
           </Select.Option>
         );
       })}

packages/li-p2/src/components/Formily/FieldSelect/Select/style.ts

@@ -1,7 +1,7 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
 export default genStyleHook('field-select', (token) => {
-  const { componentCls, controlItemBgActive, controlItemBgHover, colorTextDescription } = token;
+  const { componentCls, controlItemBgActive, controlItemBgHover } = token;
 
   return {
     [componentCls]: {

packages/li-p2/src/components/Formily/RibbonSelect/RibbonSelect/index.tsx

@@ -56,18 +56,17 @@ const InternalRibbonSelect = (props: RibbonSelectProps) => {
         const colorList = colorReverse ? [...item].reverse() : item;
         return (
           <Select.Option key={index} value={index}>
-            <div className={`${prefixCls}__selection-item`}>
-              {colorList.map((color) => (
-                <span
-                  key={color}
-                  style={{
-                    backgroundColor: color,
-                    height: '24px',
-                    width: `${100 / colorList.length}%`,
-                  }}
-                />
-              ))}
-            </div>
+            {colorList.map((color) => (
+              <span
+                key={color}
+                style={{
+                  backgroundColor: color,
+                  height: '24px',
+                  width: `${100 / colorList.length}%`,
+                  display: 'inline-block',
+                }}
+              />
+            ))}
           </Select.Option>
         );
       })}

packages/li-p2/src/components/Formily/RibbonSelect/RibbonSelect/style.ts

@@ -1,14 +1,14 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
 export default genStyleHook('ribbon-select', (token) => {
-  const { componentCls } = token;
+  const { componentCls, antCls } = token;
 
   return {
     [componentCls]: {
-      [`${componentCls}__selection-item`]: {
-        display: 'flex',
-        alignItems: 'center',
-        height: '100%',
+      [`${antCls}-select-selection-item`]: {
+        span: {
+          marginTop: 10,
+        },
       },
     },
   };