chore: 去掉 styled-component

src/components/MellowCard/index.less

+.mellow-card {
+  :global {
+    .ant-card {
+      border-radius: 8px;
+  
+      .ant-card-head {
+        border-bottom: none;
+  
+        .ant-card-head-title {
+          padding-bottom: 0;
+          font-size: 14px;
+          font-weight: 500;
+          color: rgba(23, 43, 77, 1);
+        }
+      }
+  
+      .ant-card-extra {
+        padding: 16px 0 0 0;
+      }
+  
+      .ant-card-body {
+        padding: 14px 24px 24px;
+      }
+    }
+  }
+
+  &.fullHeight {
+    height: 100%;
+
+    :global {
+      .ant-card {
+        height: 100%;
+        display: flex;
+        flex-direction: column !important;
+  
+        .ant-card-head {
+          flex-shrink: 0;
+        }
+  
+        .ant-card-body {
+          flex: 1;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

src/components/MellowCard/index.tsx

@@ -9,50 +9,7 @@ import React from 'react';
 import { Card } from 'antd';
 import classNames from 'classnames';
 import { CardProps } from 'antd/lib/card';
-import styled from 'styled-components';
-
-const Wrap = styled(props => <div {...props}/>)`
-  > .ant-card {
-    border-radius: 8px;
-
-    .ant-card-head {
-      border-bottom: none;
-
-      .ant-card-head-title {
-        padding-bottom: 0;
-        font-size: 14px;
-        font-weight: 500;
-        color: rgba(23, 43, 77, 1);
-      }
-    }
-
-    .ant-card-extra {
-      padding: 16px 0 0 0;
-    }
-
-    .ant-card-body {
-      padding: 14px 24px 24px;
-    }
-  }
-
-  &.fullHeight {
-    height: 100%;
-
-    .ant-card {
-      height: 100%;
-      display: flex;
-      flex-direction: column !important;
-
-      .ant-card-head {
-        flex-shrink: 0;
-      }
-
-      .ant-card-body {
-        flex: 1;
-      }
-    }
-  }
-`
+import styles from './index.less';
 
 export interface MellowCardProps extends CardProps {
   /**
@@ -63,16 +20,16 @@ export interface MellowCardProps extends CardProps {
 
 const MellowCard: React.FC<MellowCardProps> = props => {
   const { children, fullHeight, ...rest } = props;
-  const cls = classNames({
-    'fullHeight': fullHeight, 
+  const cls = classNames(styles['mellow-card'], {
+    [styles.fullHeight]: fullHeight, 
   });
 
   return (
-    <Wrap className={cls}>
+    <div className={cls}>
       <Card bordered={false} {...rest}>
         {children}
       </Card>
-    </Wrap>
+    </div>
   )
 };