chore(menuitem): 新增css类名，增强自定义样式能力 (#2443)

jdf2e · Jul 19, 2024 · 4047426 · 4047426
1 parent 7b0b388
commit 4047426
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/packages/menuitem/menuitem.taro.tsx b/src/packages/menuitem/menuitem.taro.tsx
@@ -237,17 +237,21 @@ export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
                 >
                   {item.value === innerValue ? (
                     <>
-                      {icon || (
+                      {icon ? (
+                        React.cloneElement(icon, {
+                          className: `nut-menu-container-item-icon ${icon.props.className || ''}`,
+                        })
+                      ) : (
                         <Check
                           color={activeColor}
                           size={16}
-                          className={getIconCName(item.value, value)}
+                          className={`nut-menu-container-item-icon ${getIconCName(item.value, value)}`}
                         />
                       )}
                     </>
                   ) : null}
                   <View
-                    className={getIconCName(item.value, value)}
+                    className={`nut-menu-container-item-title ${getIconCName(item.value, value)}`}
                     style={{
                       color: `${item.value === innerValue ? activeColor : ''}`,
                     }}

diff --git a/src/packages/menuitem/menuitem.tsx b/src/packages/menuitem/menuitem.tsx
@@ -229,7 +229,7 @@ export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
                   }}
                 >
                   {item.value === innerValue ? (
-                    <i>
+                    <i className="nut-menu-container-item-icon">
                       {icon || (
                         <Check
                           color={activeColor}
@@ -239,7 +239,7 @@ export const MenuItem = forwardRef((props: Partial<MenuItemProps>, ref) => {
                     </i>
                   ) : null}
                   <div
-                    className={getIconCName(item.value, value)}
+                    className={`nut-menu-container-item-title ${getIconCName(item.value, value)}`}
                     style={{
                       color: `${item.value === innerValue ? activeColor : ''}`,
                     }}