fix: 修改样式写法

package.json

@@ -127,6 +127,7 @@
     }
   ],
   "dependencies": {
+    "classnames": "^2.2.6",
     "cross-spawn": "^7.0.3"
   }
 }

packages/DeviceTree/src/index.js

-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Input, Divider, Tree } from 'antd';
+import classNames from 'classnames';
+import { Input, Tree, Divider, ConfigProvider } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import Empty from '@wisdom-components/Empty';
-import styles from './index.less';
+import './index.less';
 
 const DeviceTree = (props) => {
   const { prefix, placeholder, treeData, onSearch } = props;
 
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('device-tree');
+
   return (
-    <div className={styles.DeviceTree}>
+    <div className={classNames(prefixCls)}>
       <Input
         prefix={prefix}
         placeholder={placeholder}

packages/DeviceTree/src/index.less

-.DeviceTree {
+@import (reference) '~antd/es/style/themes/default';
+@device-tree-prefix-cls: ~'@{ant-prefix}-device-tree';
+
+.@{device-tree-prefix-cls} {
   padding: 5px;
 
-  :global {
-    .ant-divider {
-      margin: 6px 0 12px 0;
-    }
+  .ant-divider {
+    margin: 6px 0 12px 0;
   }
 }

packages/Empty/src/index.js

-import React, { useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { ConfigProvider } from 'antd';
 import noDataLight from './assets/noDataLight.svg';
 import noDataDark from './assets/noDataDark.svg';
 import errorLight from './assets/errorLight.png';
@@ -12,6 +14,9 @@ const Empty = ({ description, image, theme, size, statusCode, imageStyle, childr
   const des = description ? description : DESC_DATA[`${statusCode}`];
   const imageSrc = image ? image : IMAGE_DATA[theme][statusCode == '0' ? 0 : 1];
 
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('panda-empty');
+
   let imageNode = null;
 
   if (typeof image === 'string') {
@@ -21,12 +26,18 @@ const Empty = ({ description, image, theme, size, statusCode, imageStyle, childr
   }
 
   return (
-    <div className={`empty ${size}`}>
-      <div className={'image'} style={imageStyle}>
+    <div
+      className={classNames(prefixCls, {
+        small: size === 'small',
+        middle: size === 'middle',
+        large: size === 'large',
+      })}
+    >
+      <div className={`${prefixCls}-image`} style={imageStyle}>
         {imageNode}
       </div>
-      {des && <div className={'des'}>{des}</div>}
-      {children && <div className={'footer'}>{children}</div>}
+      {des && <div className={`${prefixCls}-des`}>{des}</div>}
+      {children && <div className={`${prefixCls}-footer`}>{children}</div>}
     </div>
   );
 };

packages/Empty/src/index.less

-.empty {
+@import (reference) '~antd/es/style/themes/default';
+@panda-empty-prefix-cls: ~'@{ant-prefix}-panda-empty';
+
+.@{panda-empty-prefix-cls} {
   font-size: 14px;
   text-align: center;
 
-  .image {
+  &-image {
     margin-bottom: 10px;
 
     img {
@@ -10,19 +13,19 @@
     }
   }
 
-  .des {
+  &-des {
     font-weight: 400;
     color: #90a0bb;
   }
 
-  .footer {
+  &-footer {
     margin-top: 16px;
   }
 
   &.small {
     margin: 8px 0;
 
-    .image {
+    .@{panda-empty-prefix-cls}-image {
       height: 92px;
     }
   }
@@ -30,7 +33,7 @@
   &.middle {
     margin: 32px 0;
 
-    .image {
+    .@{panda-empty-prefix-cls}-image {
       height: 124px;
     }
   }
@@ -38,7 +41,7 @@
   &.large {
     margin: 32px 0;
 
-    .image {
+    .@{panda-empty-prefix-cls}-image {
       height: 156px;
     }
   }

packages/ImageSelect/src/index.js

-import React, { useEffect, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
-// import request from "umi-request";
-import { Input, Image, Modal, Row, Col } from 'antd';
+import classNames from 'classnames';
+import { Input, Image, Modal, Row, Col, ConfigProvider } from 'antd';
 import Empty from '@wisdom-components/Empty';
 import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
-import styles from './index.less';
+import './index.less';
 
 const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect }) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('image-select');
+
   const baseUrl = url ? url : window.location.origin;
   const imgList = dataSource.map((item) => {
     return {
@@ -53,16 +56,18 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
             <Col
               span={4}
               key={item.value + index}
-              className={[styles.itemBox, imgSrc === item.value ? styles.selected : null]}
+              className={classNames(`${prefixCls}-modal-item-wrap`, {
+                selected: imgSrc === item.value,
+              })}
               onClick={(e) => handleSelect(e, item)}
             >
               <Image
-                className={styles.itemImg}
+                className={classNames(`${prefixCls}-modal-item-image`)}
                 preview={false}
                 src={baseUrl + item.value}
                 title={item.text}
               />
-              <div className={styles.itemText}>
+              <div className={classNames(`${prefixCls}-modal-item-text`)}>
                 {item.text ? item.text.split('.')[0] : item.text}
               </div>
             </Col>
@@ -72,9 +77,15 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
   };
 
   return (
-    <div className={styles.ImageSelect}>
-      <div className={styles.pandaImg} onClick={showModal}>
-        {!!imgSrc && <Image className={styles.coverImg} preview={false} src={baseUrl + imgSrc} />}
+    <div className={classNames(prefixCls)}>
+      <div className={classNames(`${prefixCls}-wrap`)} onClick={showModal}>
+        {!!imgSrc && (
+          <Image
+            className={classNames(`${prefixCls}-cover`)}
+            preview={false}
+            src={baseUrl + imgSrc}
+          />
+        )}
         {!imgSrc && (
           <div>
             <PlusOutlined />
@@ -86,10 +97,10 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
         width={width}
         centered
         title={
-          <div className={styles.header}>
-            <div className={styles.title}>{title}</div>
+          <div className={classNames(`${prefixCls}-modal-header`)}>
+            <div className={classNames(`${prefixCls}-modal-title`)}>{title}</div>
             <Input
-              className={styles.search}
+              className={classNames(`${prefixCls}-modal-search`)}
               placeholder="搜索图片关键词"
               allowClear
               bordered={false}
@@ -102,13 +113,13 @@ const ImageSelect = ({ src, url, width, title, dataSource, onSearch, onSelect })
         footer={null}
         visible={visible}
         onCancel={handleCancel}
-        className={styles.ImageSelectModal}
+        className={classNames(`${prefixCls}-modal`)}
       >
         {!!imgList.length &&
           imgList.map((item, index) => {
             return (
-              <div key={item.text + index} className={styles.folder}>
-                <div className={styles.pathTitle}>{item.text}</div>
+              <div key={item.text + index} className={classNames(`${prefixCls}-modal-folder`)}>
+                <div className={classNames(`${prefixCls}-modal-path-title`)}>{item.text}</div>
                 <div>{renderImageList(item.list)}</div>
               </div>
             );

packages/ImageSelect/src/index.less

-.ImageSelect {
-  .pandaImg {
+@import (reference) '~antd/es/style/themes/default';
+@image-select-prefix-cls: ~'@{ant-prefix}-image-select';
+
+.@{image-select-prefix-cls} {
+  &-wrap {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -12,98 +15,94 @@
     overflow: hidden;
     cursor: pointer;
 
-    .coverImg {
-      width: 88px;
-      height: 88px;
-    }
-
     p {
       font-size: 12px;
     }
   }
+
+  &-cover {
+    width: 88px;
+    height: 88px;
+  }
 }
 
-.ImageSelectModal {
-  .header {
+.@{image-select-prefix-cls}-modal {
+  &-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-right: 30px;
+  }
 
-    .title {
-      font-size: 16px;
-      font-weight: 500;
-      color: #222222;
-    }
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #222222;
+  }
 
-    .search {
-      width: 313px;
-      height: 29px;
-      background: #eef1f9;
-      border-radius: 15px;
+  &-search {
+    width: 313px;
+    height: 29px;
+    background: #eef1f9;
+    border-radius: 15px;
 
-      :global {
-        .ant-input-prefix {
-          color: #5a6c8a;
-        }
-      }
+    .ant-input-prefix {
+      color: #5a6c8a;
+    }
 
-      input {
-        background: #eef1f9;
-      }
+    input {
+      background: #eef1f9;
     }
   }
 
-  .folder {
+  &-folder {
     border-top: 1px solid #ccd6e1;
+  }
 
-    .pathTitle {
-      font-size: 16px;
-      color: #242323;
-      margin: 20px 0;
-    }
+  &-folder:first-of-type {
+    border: none;
 
-    .itemBox {
-      text-align: center;
-      border: 1px solid transparent;
-
-      .itemImg {
-        width: 40px;
-        height: 40px;
-      }
-
-      &:hover {
-        cursor: pointer;
-        border: 1px solid #b8d6fb;
-        background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%);
-        border-radius: 2px;
-      }
+    .@{image-select-prefix-cls}-modal-path-title {
+      margin-top: 0;
     }
+  }
 
-    .selected {
-      border: 1px solid #b8d6fb;
-      background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%);
-      border-radius: 2px;
-    }
+  &-path-title {
+    font-size: 16px;
+    color: #242323;
+    margin: 20px 0;
+  }
 
-    .itemText {
-      font-size: '12px';
-      white-space: 'nowrap';
-    }
+  &-item-wrap {
+    text-align: center;
+    border: 1px solid transparent;
+  }
 
-    &:first-of-type {
-      border: none;
+  &-item-wrap:hover {
+    cursor: pointer;
+    border: 1px solid #b8d6fb;
+    background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%);
+    border-radius: 2px;
+  }
 
-      .pathTitle {
-        margin-top: 0;
-      }
-    }
+  &-item-image {
+    width: 40px;
+    height: 40px;
   }
 
-  :global {
-    .ant-modal-body {
-      max-height: 600px;
-      overflow-y: auto;
-    }
+  &.selected {
+    border: 1px solid #b8d6fb;
+    background: linear-gradient(0deg, #f1f4fb 0%, #ffffff 100%);
+    border-radius: 2px;
+  }
+
+  &-item-text {
+    font-size: 12px;
+    white-space: nowrap;
+  }
+
+  .ant-modal-body {
+    max-height: 600px;
+    overflow-y: auto;
   }
 }