style: [Tabs] Prevent the Radio and Checkbox in ReactNode passed in through the tab attribute in Tabs from being affected by the icon style override

packages/semi-foundation/tabs/tabs.scss

@@ -4,6 +4,8 @@
 
 
 $module: #{$prefix}-tabs;
+// Prevent the Radio and Checkbox in ReactNode passed in through the tab attribute in Tabs from being affected by the icon style override
+$ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix}-icon-checkbox_indeterminate';
 
 .#{$module} {
     box-sizing: border-box;
@@ -41,7 +43,7 @@ $module: #{$prefix}-tabs;
 
             user-select: none;
 
-            .#{$prefix}-icon {
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
@@ -61,7 +63,7 @@ $module: #{$prefix}-tabs;
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
@@ -69,7 +71,7 @@ $module: #{$prefix}-tabs;
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
             }
@@ -84,7 +86,7 @@ $module: #{$prefix}-tabs;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab_selected-icon-default;
                 }
 
@@ -123,7 +125,7 @@ $module: #{$prefix}-tabs;
 
             user-select: none;
 
-            .#{$prefix}-icon {
+            .#{$prefix}-icon:not(#{$ignoreIcon}) {
                 position: relative;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
@@ -143,7 +145,7 @@ $module: #{$prefix}-tabs;
             &:hover {
                 color: $color-tabs_tab_line_default-text-hover;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-hover;
                 }
             }
@@ -151,7 +153,7 @@ $module: #{$prefix}-tabs;
             &:active {
                 color: $color-tabs_tab_line_default-text-active;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab-icon-active;
                 }
             }
@@ -166,7 +168,7 @@ $module: #{$prefix}-tabs;
                 font-weight: $font-tabs_tab_active-fontWeight;
                 color: $color-tabs_tab_line_selected-text-default;
 
-                .#{$prefix}-icon {
+                .#{$prefix}-icon:not(#{$ignoreIcon}) {
                     color: $color-tabs_tab_selected-icon-default;
                 }
 

packages/semi-ui/tabs/_story/tabs.stories.jsx

@@ -3,7 +3,7 @@ import Tabs from '../index';
 import Button from '@douyinfe/semi-ui/button/index';
 import Typography from '@douyinfe/semi-ui/typography/index';
 import Switch from '@douyinfe/semi-ui/switch/index';
-import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+import { Radio, RadioGroup, Checkbox } from '@douyinfe/semi-ui';
 import Icon from '../../icons';
 import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons';
 const TabPane = Tabs.TabPane;
@@ -987,3 +987,16 @@ export const Fix1456 = () =>{
 Fix1456.story = {
   name: 'Fix-1456',
 };
+
+export const IconStyle = () => {
+  return (
+    <Tabs type="line">
+        <TabPane tab={<Radio defaultChecked>test2</Radio>} itemKey="1">
+          用于测试 tab 下的 Radio 中的 semi-icon 是否收到影响
+        </TabPane>
+        <TabPane tab={<Checkbox defaultChecked>test2</Checkbox>} itemKey="2">
+          用于测试 Checkbox 下的 Radio 中的 semi-icon 是否收到影响
+        </TabPane>
+    </Tabs>
+  )
+}