fix(card): [card] Style pollution caused by modifying the card component (#2910)

Author: Youyou-smiles

examples/sites/demos/pc/app/card/card-select-composition-api.vue

@@ -159,10 +159,12 @@ const dataArr = ref([
 .card-stlecting {
   border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
-</style>
-
-<style>
-#smb-card .tiny-card--small-padding {
+#smb-card :deep(.tiny-card--small-padding) {
   padding: 0;
 }
+.card-wrap :deep(.tiny-input__inner) {
+  border: none;
+  border-radius: 6px;
+  background-color: #fafafa;
+}
 </style>

examples/sites/demos/pc/app/card/card-select.vue

@@ -169,10 +169,12 @@ export default {
 .card-stlecting {
   border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
-</style>
-
-<style>
-#smb-card .tiny-card--small-padding {
+#smb-card :deep(.tiny-card--small-padding) {
   padding: 0;
 }
+.card-wrap :deep(.tiny-input__inner) {
+  border: none;
+  border-radius: 6px;
+  background-color: #fafafa;
+}
 </style>

packages/theme/src/card/index.less

@@ -14,7 +14,6 @@
 @import './vars.less';
 
 @card-prefix-cls: ~'@{css-prefix}card';
-@input-prefix-cls: ~'@{css-prefix}input';
 
 .@{card-prefix-cls} {
   .inject-Card-vars();
@@ -289,11 +288,4 @@
       }
     }
   }
-  .@{input-prefix-cls} {
-    &__inner {
-      border: none;
-      border-radius: 6px;
-      background-color: #fafafa;
-    }
-  }
 }