mod: use css module

app/app.less

@@ -25,23 +25,23 @@
 	src: url(~@app/static/fonts/Roboto-Regular.ttf);
 }
 
-#studio-app {
+#studioApp {
 	font-family: Roboto-Regular, sans-serif;
 }
 
-.center-layout {
+.studioCenterLayout {
 	width: @containerWidth;
 	margin: 0 auto;
 }
 
-.studio-tab-header {
+.studioTabHeader {
 	display: flex;
 	justify-content: center;
 	padding-bottom: 16px;
 	border-bottom: 1px solid @gray;
 }
 
-.ant-radio-group.nebula-tab-group {
+.ant-radio-group.studioTabGroup {
 	background: @lightGray;
 	border-radius: 20px;
 	padding: 4px;
@@ -75,7 +75,7 @@
 	font-family: Roboto-Regular, sans-serif;
 }
 
-.ant-btn.warning-btn {
+.ant-btn.warningBtn {
 	color: @red;
 	border-color: @red;
 	display: inline-flex;
@@ -98,7 +98,7 @@
 	}
 }
 
-.ant-btn.primary-btn {
+.ant-btn.primaryBtn {
 	color: @blue;
 	border-color: @blue;
 	display: inline-flex;
@@ -121,7 +121,7 @@
 	}
 }
 
-.ant-btn.cancel-btn {
+.ant-btn.cancelBtn {
 	color: @darkGray;
 	border-color: @darkGray;
 	display: inline-flex;
@@ -144,7 +144,7 @@
 	}
 }
 
-.ant-btn.studio-add-btn {
+.ant-btn.studioAddBtn {
 	border-radius: 3px;
 	display: inline-flex;
 	align-items: center;
@@ -155,7 +155,7 @@
 		align-items: center;
 	}
 
-	.studio-add-btn-icon {
+	.studioAddBtnIcon {
 		display: inline-flex;
 		margin-right: 10px;
 		height: 22px;
@@ -171,7 +171,7 @@
 	}
 }
 
-.studio-form-footer {
+.studioFormFooter {
 	position: fixed;
 	left: 0;
 	bottom: 0;

app/components/Breadcrumb/index.less → app/components/Breadcrumb/index.module.less

@@ -1,5 +1,5 @@
 @import '~@app/common.less';
-.nebula-breadcrumb {
+.studioBreadcrumb {
 	height: 60px;
 	background-color: #fff;
 	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
@@ -8,17 +8,17 @@
 	display: flex;
 	padding-left: 0;
 	padding-right: 0;
-	.arrow-icon > svg {
+	.arrowIcon > svg {
 		width: 23px;
 		height: 23px;
 		margin-right: 15px;
 	}
-	.breadcrumb-container  {
+	.breadcrumbContainer {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 	}
-	.ant-breadcrumb {
+	.breadcrumb {
 		flex: 1;
 		display: inline-flex;
 		align-items: center;
@@ -27,11 +27,11 @@
 		& > span {
 			display: inline-flex;
 			align-items: center;
-			.ant-breadcrumb-link, a {
+			:global(.ant-breadcrumb-link), a {
 				display: inline-flex;
 				align-items: center;
 			}
-			a, .ant-breadcrumb-link span {
+			a, :global(.ant-breadcrumb-link span) {
 				word-break: break-all;
 				text-overflow: ellipsis;
 				overflow: hidden;
@@ -46,7 +46,7 @@
 			}
 		}
 	}
-	&.has-breadcrumb {
+	&:global(.has-breadcrumb) {
 		padding: 0;
 	}
 }

app/components/Breadcrumb/index.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import Icon from '@app/components/Icon';
 
-import './index.less';
-
+import cls from 'classnames';
+import styles from './index.module.less';
 interface IProps {
   routes: {
     path: string;
@@ -19,7 +19,7 @@ const itemRender = (route, _params, routes, _paths) => {
   return final ? (
     <span>{route.breadcrumbName}</span>
   ) : first ? <> 
-    <Link to={routes[routes.length - 2].path}><Icon className="arrow-icon" type="icon-studio-btn-return" /></Link>
+    <Link to={routes[routes.length - 2].path}><Icon className={styles.arrowIcon} type="icon-studio-btn-return" /></Link>
     <Link to={route.path}>{route.breadcrumbName}</Link>
   </> : (
     <Link to={route.path}>
@@ -33,10 +33,11 @@ const NebulaBreadcrumb: React.FC<IProps> = (props: IProps) => {
   return (
     <PageHeader
       title={null}
-      className="nebula-breadcrumb"
+      className={styles.studioBreadcrumb}
       breadcrumbRender={() => {
-        return <div className="breadcrumb-container center-layout">
-          <Breadcrumb 
+        return <div className={cls(styles.breadcrumbContainer, 'studioCenterLayout')}>
+          <Breadcrumb
+            className={styles.breadcrumb}
             routes={routes} 
             itemRender={itemRender} 
           />

app/components/Button/index.less → app/components/Button/index.module.less

@@ -1,18 +1,14 @@
 @import '@app/common.less';
 
-svg.btn-icon {
+svg.btnIcon {
 	fill: #262626;
 	cursor: pointer;
 }
 
-svg.btn-actived {
+svg.btnActived {
 	fill: @blue;
 }
 
-svg.btn-disabled {
+svg.btnDisabled {
 	cursor: not-allowed;
-}
-
-svg.rotate-btn {
-	transform: rotate(180deg);
-}
+}

app/components/Button/index.tsx

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import React from 'react';
 
 import Icon from '@app/components/Icon';
-import './index.less';
+import styles from './index.module.less';
 interface IBtnProps {
   disabled?: boolean;
   action?: () => void;
@@ -28,8 +28,8 @@ const MenuButton: React.FC<IMenuButton> = (props: IMenuButton) => {
   return <div
     className={classnames(
       {
-        'btn-disabled': disabled,
-        'btn-actived': actived,
+        [styles.btnDisabled]: disabled,
+        [styles.btnActived]: actived,
       },
       className,
     )}
@@ -49,7 +49,7 @@ const MenuButton: React.FC<IMenuButton> = (props: IMenuButton) => {
         data-track-category={trackCategory}
         data-track-action={trackAction}
         data-track-label={trackLabel}
-        className="btn-icon"
+        className={styles.btnIcon}
       />
     )}
     {component}

app/components/CSVPreviewLink/index.less → app/components/CSVPreviewLink/index.module.less

@@ -1,8 +1,8 @@
 @import '~@app/common.less';
-.popover-preview {
+.popoverPreview {
 	max-width: 80%;
 }
-.csv-preview {
+.csvPreview {
 	max-width: 600px;
 	padding: 16px 8px 50px;
 	overflow: auto;
@@ -17,7 +17,7 @@
 				background-color: @lightBlue;
 			}
 		}
-		.limit-width {
+		.limitWidth {
 			max-width: 180px;
 			text-overflow: ellipsis;
 			overflow: hidden;
@@ -28,7 +28,7 @@
 		}
 	}
 	.noBackground {
-		.ant-table-thead > tr > th {
+		:global(.ant-table-thead > tr > th) {
 			background-color: #fff;
 			&::before {
 				content: none !important;
@@ -45,7 +45,7 @@
     transform: translateX(-50%);
 	}
 
-	.csv-select-index {
+	.csvSelectIndex {
 		margin-right: 10px;
 	}
 
@@ -54,3 +54,11 @@
 	}
 }
 
+.btnPreview {
+	font-family: Roboto-Regular, sans-serif;
+	font-weight: bold;
+	color: @blue;
+}
+.btnActived {
+	color: @lightBlack;
+}

app/components/CSVPreviewLink/index.tsx

@@ -3,8 +3,8 @@ import { } from 'antd/lib/button';
 import React, { useState } from 'react';
 import intl from 'react-intl-universal';
 import { v4 as uuidv4 } from 'uuid';
-import './index.less';
-import classNames from 'classnames';
+import cls from 'classnames';
+import styles from './index.module.less';
 
 interface IProps {
   file: any;
@@ -33,34 +33,34 @@ const CSVPreviewLink = (props: IProps) => {
         title: onMapping ? (
           <Button
             type="primary"
-            className="csv-select-index"
+            className={styles.csvSelectIndex}
             onClick={() => handleMapping(textIndex)}
           >{`column ${textIndex}`}</Button>
         ) : (
           `Column ${textIndex}`
         ),
         dataIndex: index,
-        render: value => <span className="limit-width">{value}</span>,
+        render: value => <span className={styles.limitWidth}>{value}</span>,
       };
     })
     : [];
   return (
     <Popover
       destroyTooltipOnHide={true}
-      overlayClassName="popover-preview"
+      overlayClassName={styles.popoverPreview}
       visible={visible}
       trigger="click"
       arrowPointAtCenter
       onVisibleChange={visible => setVisible(visible)}
-      content={<div className="csv-preview">
+      content={<div className={styles.csvPreview}>
         <Table
-          className={classNames({ 'noBackground': !!onMapping })}
+          className={cls({ [styles.noBackground]: !!onMapping })}
           dataSource={content}
           columns={columns}
           pagination={false}
           rowKey={() => uuidv4()}
         />
-        <div className="operation">
+        <div className={styles.operation}>
           {onMapping && (
             <Button onClick={() => handleMapping(null)}>
               {intl.get('import.ignore')}
@@ -69,7 +69,7 @@ const CSVPreviewLink = (props: IProps) => {
         </div>
       </div>}
     >
-      <Button type="link" className={classNames('btn-preview', { 'primary-btn': btnType === 'default', 'actived': selected })} onClick={handleLinkClick}>
+      <Button type="link" className={cls(styles.btnPreview, { 'primaryBtn': btnType === 'default', [styles.btnActived]: selected })} onClick={handleLinkClick}>
         {children}
       </Button>
     </Popover>

app/components/ColorPicker/index.less → app/components/ColorPicker/index.module.less

@@ -1,4 +1,4 @@
-.custom-picker {
+.customPicker {
 	border: none !important;
 	box-shadow: initial !important;
 	border-radius: 0 !important;

app/components/ColorPicker/index.tsx

@@ -3,7 +3,7 @@ import { TwitterPicker } from 'react-color';
 
 import { COLOR_PICK_LIST } from '@app/config/explore';
 
-import './index.less';
+import styles from './index.module.less';
 
 interface IProps {
   onChangeComplete?: (color: string) => void;
@@ -27,7 +27,7 @@ const ColorPicker: React.FC<IProps> = (props: IProps) => {
   return (
     <TwitterPicker
       width="240px"
-      className="custom-picker"
+      className={styles.customPicker}
       onChange={handleChange}
       onChangeComplete={handleChangeComplete}
       colors={COLOR_PICK_LIST}