refactor: 保证所有的tsx和less都正确使用prefix (#3024)

* refactor: extract prefix cls as less variable

* refactor: apply ant icon prefix cls in less files

* refactor: all components support prefixCls props

components/affix/index.tsx

@@ -55,6 +55,7 @@ export interface AffixProps {
   style?: React.CSSProperties;
   onChange?: (affixed?: boolean) => any;
   target?: () => Window | HTMLElement;
+  prefixCls?: string;
 }
 
 export default class Affix extends React.Component<AffixProps, any> {
@@ -69,6 +70,7 @@ export default class Affix extends React.Component<AffixProps, any> {
       return window;
     },
     onChange() {},
+    prefixCls: 'ant-affix',
   };
 
   scrollEvent: any;
@@ -215,7 +217,7 @@ export default class Affix extends React.Component<AffixProps, any> {
 
   render() {
     const className = classNames({
-      'ant-affix': this.state.affixStyle,
+      [this.props.prefixCls]: this.state.affixStyle,
     });
 
     const props = assign({}, this.props);

components/affix/style/index.less

 @import "../../style/themes/default";
 
-.ant-affix {
+.@{ant-prefix}-affix {
   position: fixed;
   z-index: @zindex-affix;
 }

components/alert/index.tsx

@@ -113,7 +113,7 @@ export default class Alert extends React.Component<AlertProps, any> {
         onEnd={this.animationEnd}
       >
         <div data-show={this.state.closing} className={alertCls}>
-          {showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
+          {showIcon ? <Icon className={`${prefixCls}-icon`} type={iconType} /> : null}
           <span className={`${prefixCls}-message`}>{message}</span>
           <span className={`${prefixCls}-description`}>{description}</span>
           {closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>

components/alert/style/index.less

 @import "../../style/themes/default";
 
-@alert-prefix-cls: ant-alert;
+@alert-prefix-cls: ~"@{ant-prefix}-alert";
 
 .@{alert-prefix-cls} {
   position: relative;
@@ -70,7 +70,7 @@
     overflow: hidden;
     cursor: pointer;
 
-    .anticon-cross {
+    .@{iconfont-css-prefix}-cross {
       color: @legend-color;
       transition: color .3s ease;
       &:hover {

components/back-top/style/index.less

 @import "../../style/themes/default";
 
-@backtop-prefix-cls: ant-back-top;
+@backtop-prefix-cls: ~"@{ant-prefix}-back-top";
 
 .@{backtop-prefix-cls} {
   z-index: @zindex-back-top;

components/badge/style/index.less

 @import "../../style/themes/default";
 
-@badge-prefix-cls: ant-badge;
-@number-prefix-cls: ant-scroll-number;
+@badge-prefix-cls: ~"@{ant-prefix}-badge";
+@number-prefix-cls: ~"@{ant-prefix}-scroll-number";
 
 .@{badge-prefix-cls} {
   position: relative;

components/breadcrumb/style/index.less

 @import "../../style/themes/default";
 
-@breadcrumb-prefix-cls: ant-breadcrumb;
+@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb";
 
 .@{breadcrumb-prefix-cls} {
   color: #999;
@@ -29,7 +29,7 @@
   }
 
   &-link {
-    > .anticon + span {
+    > .@{iconfont-css-prefix} + span {
       margin-left: 4px;
     }
   }

components/button/button-group.tsx

@@ -2,18 +2,18 @@ import * as React from 'react';
 import classNames from 'classnames';
 import splitObject from '../_util/splitObject';
 
-const prefix = 'ant-btn-group-';
-
 export type ButtonSize = 'small' | 'large'
 
 export interface ButtonGroupProps {
   size?: ButtonSize;
   style?: React.CSSProperties;
   className?: string;
+  prefixCls?: string;
 }
 
 export default function ButtonGroup(props: ButtonGroupProps) {
-  const [{ size, className }, others] = splitObject(props, ['size', 'className']);
+  const [{ prefixCls = 'ant-btn-group', size, className }, others] =
+    splitObject(props, ['prefixCls', 'size', 'className']);
 
   // large => lg
   // small => sm
@@ -23,8 +23,8 @@ export default function ButtonGroup(props: ButtonGroupProps) {
   })[size] || '';
 
   const classes = classNames({
-    'ant-btn-group': true,
-    [prefix + sizeCls]: sizeCls,
+    [prefixCls]: true,
+    [`${prefixCls}-${sizeCls}`]: sizeCls,
     [className]: className,
   });
 

components/button/style/index.less

@@ -2,7 +2,7 @@
 @import "../../style/mixins/index";
 @import "./mixin";
 
-@btn-prefix-cls: ant-btn;
+@btn-prefix-cls: ~"@{ant-prefix}-btn";
 
 // Button styles
 // -----------------------------
@@ -69,7 +69,7 @@
     padding-left: 29px;
     pointer-events: none;
     position: relative;
-    .anticon {
+    .@{iconfont-css-prefix} {
       margin-left: -14px;
       transition: all .3s @ease-in-out;
     }
@@ -80,7 +80,7 @@
 
   &-sm&-loading {
     padding-left: 24px;
-    .anticon {
+    .@{iconfont-css-prefix} {
       margin-left: -17px;
     }
   }

components/calendar/style/index.less

 @import "../../style/themes/default";
 
-@full-calendar-prefix-cls: ant-fullcalendar;
+@full-calendar-prefix-cls: ~"@{ant-prefix}-fullcalendar";
 
 .@{full-calendar-prefix-cls} {
   font-size: @font-size-base;
@@ -14,16 +14,16 @@
     padding: 11px 16px 11px 0;
     text-align: right;
 
-    .ant-select {
+    .@{ant-prefix}-select {
       text-align: left;
     }
 
-    .ant-radio-group {
+    .@{ant-prefix}-radio-group {
       margin-left: 8px;
       text-align: left;
     }
 
-    label.ant-radio-button {
+    label.@{ant-prefix}-radio-button {
       height: 22px;
       line-height: 20px;
       padding: 0 10px;
@@ -162,10 +162,10 @@
   }
 
   &-fullscreen &-header {
-    .ant-radio-group {
+    .@{ant-prefix}-radio-group {
       margin-left: 16px;
     }
-    label.ant-radio-button {
+    label.@{ant-prefix}-radio-button {
       height: 28px;
       line-height: 26px;
     }

components/card/style/index.less

 @import "../../style/themes/default";
 
-@card-prefix-cls: ant-card;
+@card-prefix-cls: ~"@{ant-prefix}-card";
 
 .@{card-prefix-cls} {
   background: #fff;

components/carousel/index.tsx

@@ -37,12 +37,14 @@ export interface CarouselProps {
   afterChange?: (current: number) => void;
   /** 行内样式 */
   style?: React.CSSProperties;
+  prefixCls?: string;
 }
 
 export default class Carousel extends React.Component<CarouselProps, any> {
   static defaultProps = {
     dots: true,
     arrows: false,
+    prefixCls: 'ant-carousel',
   };
 
   render() {
@@ -53,9 +55,9 @@ export default class Carousel extends React.Component<CarouselProps, any> {
       props.draggable = false;
     }
 
-    let className = 'ant-carousel';
+    let className = props.prefixCls;
     if (props.vertical) {
-      className = `${className} ant-carousel-vertical`;
+      className = `${className} ${className}-vertical`;
     }
 
     return (

components/carousel/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-.ant-carousel {
+.@{ant-prefix}-carousel {
   .slick-slider {
     position: relative;
     display: block;
@@ -204,7 +204,7 @@
   }
 }
 
-.ant-carousel-vertical {
+.@{ant-prefix}-carousel-vertical {
   .slick-slider {
     padding-bottom: 0;
   }

components/cascader/index.tsx

@@ -18,7 +18,7 @@ export type CascaderExpandTrigger = 'click' | 'hover'
 
 export interface ShowSearchType {
   filter?: (inputValue: string, path: CascaderOptionType[]) => boolean;
-  render?: (inputValue: string, path: CascaderOptionType[]) => React.ReactNode;
+  render?: (inputValue: string, path: CascaderOptionType[], prefixCls: string) => React.ReactNode;
   sort?: (a: CascaderOptionType[], b: CascaderOptionType[], inputValue: string) => number;
   matchInputWidth?: boolean;
 }
@@ -58,12 +58,14 @@ export interface CascaderProps {
   changeOnSelect?: boolean;
   /** 浮层可见变化时回调 */
   onPopupVisibleChange?: (popupVisible: boolean) => void;
+  prefixCls?: string;
+  inputPrefixCls?: string;
 }
 
-function highlightKeyword(str: string, keyword: string) {
+function highlightKeyword(str: string, keyword: string, prefixCls: string) {
   return str.split(keyword)
     .map((node: string, index: number) => index === 0 ? node : [
-      <span className="ant-cascader-menu-item-keyword" key="seperator">{keyword}</span>,
+      <span className={`${prefixCls}-menu-item-keyword`} key="seperator">{keyword}</span>,
       node,
     ]);
 }
@@ -72,9 +74,9 @@ function defaultFilterOption(inputValue, path) {
   return path.some(option => option.label.indexOf(inputValue) > -1);
 }
 
-function defaultRenderFilteredOption(inputValue, path) {
+function defaultRenderFilteredOption(inputValue, path, prefixCls) {
   return path.map(({ label }, index) => {
-    const node = label.indexOf(inputValue) > -1 ? highlightKeyword(label, inputValue) : label;
+    const node = label.indexOf(inputValue) > -1 ? highlightKeyword(label, inputValue, prefixCls) : label;
     return index === 0 ? node : [' / ', node];
   });
 }
@@ -90,6 +92,7 @@ function defaultSortFilteredOption(a, b, inputValue) {
 export default class Cascader extends React.Component<CascaderProps, any> {
   static defaultProps = {
     prefixCls: 'ant-cascader',
+    inputPrefixCls: 'ant-input',
     placeholder: 'Please select',
     transitionName: 'slide-up',
     popupPlacement: 'bottomLeft',
@@ -206,7 +209,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     return flattenOptions;
   }
 
-  generateFilteredOptions() {
+  generateFilteredOptions(prefixCls) {
     const { showSearch, notFoundContent } = this.props;
     const {
       filter = defaultFilterOption,
@@ -220,7 +223,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     if (filtered.length > 0) {
       return filtered.map((path) => {
         return {
-          label: render(inputValue, path),
+          label: render(inputValue, path, prefixCls),
           value: path.map(o => o.value),
         };
       });
@@ -238,8 +241,8 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     const value = state.value;
 
     const sizeCls = classNames({
-      'ant-input-lg': size === 'large',
-      'ant-input-sm': size === 'small',
+      [`${props.inputPrefixCls}-lg`]: size === 'large',
+      [`${props.inputPrefixCls}-sm`]: size === 'small',
     });
     const clearIcon = (allowClear && !disabled && value.length > 0) || state.inputValue ?
       <Icon type="cross-circle"
@@ -279,7 +282,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
 
     let options = props.options;
     if (state.inputValue) {
-      options = this.generateFilteredOptions();
+      options = this.generateFilteredOptions(prefixCls);
     }
     // Dropdown menu should keep previous status until it is fully closed.
     if (!state.popupVisible) {

components/cascader/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@cascader-prefix-cls: ant-cascader;
+@cascader-prefix-cls: ~"@{ant-prefix}-cascader";
 
 .@{cascader-prefix-cls} {
   font-size: @font-size-base;
-  &-input.ant-input {
+  &-input.@{ant-prefix}-input {
     background-color: transparent;
     display: block;
     cursor: pointer;

components/checkbox/Group.tsx

@@ -19,6 +19,7 @@ export interface CheckboxGroupProps {
   onChange?: (checkedValue: Array<string>) => void;
   disabled?: boolean;
   style?: React.CSSProperties;
+  prefixCls?: string;
 }
 
 export interface CheckboxGroupState {
@@ -30,6 +31,7 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps, C
     options: [],
     defaultValue: [],
     onChange() {},
+    prefixCls: 'ant-checkbox-group',
   };
   static propTypes = {
     defaultValue: React.PropTypes.array,
@@ -84,15 +86,16 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps, C
     this.props.onChange(value);
   }
   render() {
+    const { prefixCls } = this.props;
     const options = this.getOptions();
     return (
-      <div className="ant-checkbox-group">
+      <div className={prefixCls}>
         {
           options.map(option =>
             <Checkbox disabled={'disabled' in option ? option.disabled : this.props.disabled}
               checked={this.state.value.indexOf(option.value) !== -1}
               onChange={() => this.toggleOption(option)}
-              className="ant-checkbox-group-item" key={option.value}
+              className={`${prefixCls}-item`} key={option.value}
             >
               {option.label}
             </Checkbox>

components/checkbox/style/mixin.less

 @import "../../style/mixins/index";
 
-.antCheckboxFn(@checkbox-prefix-cls: ant-checkbox) {
+.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox") {
   @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
   // 一般状态
   .@{checkbox-prefix-cls} {

components/collapse/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@collapse-prefix-cls: ant-collapse;
+@collapse-prefix-cls: ~"@{ant-prefix}-collapse";
 
 .collapse-close() {
   .iconfont-size-under-12px(7px, 270deg);

components/date-picker/RangePicker.tsx

@@ -8,6 +8,7 @@ import Icon from '../icon';
 export default class RangePicker extends React.Component<any, any> {
   static defaultProps = {
     defaultValue: [],
+    prefixCls: 'ant-calendar',
   };
 
   constructor(props) {
@@ -50,12 +51,12 @@ export default class RangePicker extends React.Component<any, any> {
     const props = this.props;
     const locale = props.locale;
 
-    const { disabledDate, showTime, getCalendarContainer,
+    const { disabledDate, showTime, getCalendarContainer, prefixCls,
       transitionName, disabled, popupStyle, align, style, onOk } = this.props;
     const state = this.state;
 
     const calendarClassName = classNames({
-      'ant-calendar-time': showTime,
+      [`${prefixCls}-time`]: showTime,
     });
 
     // 需要选择时间时，点击 ok 时才触发 onChange
@@ -81,7 +82,7 @@ export default class RangePicker extends React.Component<any, any> {
     const calendar = (
       <RangeCalendar
         {...calendarHandler}
-        prefixCls="ant-calendar"
+        prefixCls={prefixCls}
         className={calendarClassName}
         timePicker={props.timePicker}
         disabledDate={disabledDate}
@@ -95,7 +96,7 @@ export default class RangePicker extends React.Component<any, any> {
     const clearIcon = (!props.disabled && state.value && (state.value[0] || state.value[1]))
       ? <Icon
         type="cross-circle"
-        className="ant-calendar-picker-clear"
+        className={`${prefixCls}-picker-clear`}
         onClick={this.clearSelection}
       /> : null;
 
@@ -106,7 +107,7 @@ export default class RangePicker extends React.Component<any, any> {
         disabled={disabled}
         calendar={calendar}
         value={state.value}
-        prefixCls="ant-calendar-picker-container"
+        prefixCls={`${prefixCls}-picker-container`}
         style={popupStyle}
         align={align}
         getCalendarContainer={getCalendarContainer}
@@ -124,18 +125,18 @@ export default class RangePicker extends React.Component<any, any> {
                   readOnly
                   value={(start && start.format(props.format)) || ''}
                   placeholder={startPlaceholder}
-                  className="ant-calendar-range-picker-input"
+                  className={`${prefixCls}-range-picker-input`}
                 />
-                <span className="ant-calendar-range-picker-separator"> ~ </span>
+                <span className={`${prefixCls}-range-picker-separator`}> ~ </span>
                 <input
                   disabled={disabled}
                   readOnly
                   value={(end && end.format(props.format)) || ''}
                   placeholder={endPlaceholder}
-                  className="ant-calendar-range-picker-input"
+                  className={`${prefixCls}-range-picker-input`}
                 />
                 {clearIcon}
-                <span className="ant-calendar-picker-icon" />
+                <span className={`${prefixCls}-picker-icon`} />
               </span>
             );
           }

components/date-picker/createPicker.tsx

@@ -8,11 +8,17 @@ import Icon from '../icon';
 
 export interface PickerProps {
   value?: moment.Moment;
+  prefixCls: string;
 }
 
 export default function createPicker(TheCalendar) {
   // use class typescript error
   const CalenderWrapper = React.createClass({
+    getDefaultProps() {
+      return {
+        prefixCls: 'ant-calendar',
+      };
+    },
 
     getInitialState() {
       const props = this.props;
@@ -46,6 +52,7 @@ export default function createPicker(TheCalendar) {
 
     render() {
       const props = this.props;
+      const prefixCls = props.prefixCls;
       const locale = props.locale;
 
       const placeholder = ('placeholder' in props)
@@ -54,8 +61,8 @@ export default function createPicker(TheCalendar) {
       const disabledTime = props.showTime ? props.disabledTime : null;
 
       const calendarClassName = classNames({
-        'ant-calendar-time': props.showTime,
-        'ant-calendar-month': MonthCalendar === TheCalendar,
+        [`${prefixCls}-time`]: props.showTime,
+        [`${prefixCls}-month`]: MonthCalendar === TheCalendar,
       });
 
       // 需要选择时间时，点击 ok 时才触发 onChange
@@ -85,7 +92,7 @@ export default function createPicker(TheCalendar) {
           timePicker={props.timePicker}
           defaultValue={props.defaultPickerValue || moment()}
           dateInputPlaceholder={placeholder}
-          prefixCls="ant-calendar"
+          prefixCls={prefixCls}
           className={calendarClassName}
           onOk={props.onOk}
           {...calendarHandler}
@@ -100,7 +107,7 @@ export default function createPicker(TheCalendar) {
 
       const clearIcon = (!props.disabled && this.state.value) ?
         <Icon type="cross-circle"
-          className="ant-calendar-picker-clear"
+          className={`${prefixCls}-picker-clear`}
           onClick={this.clearSelection}
         /> : null;
       return (
@@ -111,7 +118,7 @@ export default function createPicker(TheCalendar) {
             disabled={props.disabled}
             calendar={calendar}
             value={this.state.value}
-            prefixCls="ant-calendar-picker-container"
+            prefixCls={`${prefixCls}-picker-container`}
             style={props.popupStyle}
             align={props.align}
             getCalendarContainer={props.getCalendarContainer}
@@ -131,7 +138,7 @@ export default function createPicker(TheCalendar) {
                       className={props.pickerInputClass}
                     />
                     {clearIcon}
-                    <span className="ant-calendar-picker-icon" />
+                    <span className={`${prefixCls}-picker-icon`} />
                   </span>
                 );
               }

components/date-picker/index.tsx

@@ -17,6 +17,8 @@ export interface PickerProps {
   locale?: any;
   size?: 'large' | 'small' | 'default';
   getCalendarContainer?: (trigger) => React.ReactNode;
+  prefixCls?: string;
+  inputPrefixCls?: string;
 }
 
 export interface SinglePickerProps {

components/date-picker/style/RangePicker.less

 @input-box-height: 34px;
 
-.@{calendar-prefix-cls}-range-picker.ant-input {
+.@{calendar-prefix-cls}-range-picker.@{ant-prefix}-input {
   padding-right: 26px;
 }
 

components/date-picker/style/index.less

@@ -3,8 +3,8 @@
 @import "../../input/style/mixin";
 @import "../../button/style/mixin";
 
-@calendar-prefix-cls: ant-calendar;
-@timepicker-prefix-cls: ant-calendar-time-picker;
+@calendar-prefix-cls: ~"@{ant-prefix}-calendar";
+@timepicker-prefix-cls: ~"@{ant-prefix}-calendar-time-picker";
 
 @import "Picker";
 @import "Calendar";

components/date-picker/wrapPicker.tsx

@@ -22,6 +22,8 @@ export default function wrapPicker(Picker, defaultFormat?) {
         align: {
           offset: [0, -9],
         },
+        prefixCls: 'ant-calendar',
+        inputPrefixCls: 'ant-input',
       };
     },
 
@@ -48,14 +50,15 @@ export default function wrapPicker(Picker, defaultFormat?) {
 
     render() {
       const props = this.props;
+      const { prefixCls, inputPrefixCls } = props;
       const pickerClass = classNames({
-        'ant-calendar-picker': true,
+        [`${prefixCls}-picker`]: true,
       });
       const pickerInputClass = classNames({
-        'ant-calendar-range-picker': true,
-        'ant-input': true,
-        'ant-input-lg': props.size === 'large',
-        'ant-input-sm': props.size === 'small',
+        [`${prefixCls}-range-picker`]: true,
+        [inputPrefixCls]: true,
+        [`${inputPrefixCls}-lg`]: props.size === 'large',
+        [`${inputPrefixCls}-sm`]: props.size === 'small',
       });
 
       const locale = this.getLocale();
@@ -70,7 +73,7 @@ export default function wrapPicker(Picker, defaultFormat?) {
         <TimePickerPanel
           {...rcTimePickerProps}
           {...props.showTime}
-          prefixCls="ant-calendar-time-picker"
+          prefixCls={`${prefixCls}-time-picker`}
           placeholder={locale.timePickerLocale.placeholder}
           transitionName="slide-up"
         />

components/dropdown/dropdown-button.tsx

@@ -14,6 +14,7 @@ export interface DropdownButtonProps {
   visible?: boolean;
   onVisibleChange?: (visible: boolean) => void;
   style?: React.CSSProperties;
+  prefixCls?: string;
 }
 
 export default class DropdownButton extends React.Component<DropdownButtonProps, any> {
@@ -28,13 +29,15 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
       targetOffset: [0, 0],
     },
     type: 'default',
+    prefixCls: 'ant-dropdown-button',
   };
 
   render() {
-    const [{ type, overlay, trigger, align, children, className, onClick }, restProps] = splitObject(this.props,
-      ['type', 'overlay', 'trigger', 'align', 'children', 'className', 'onClick']);
+    const [{ type, overlay, trigger, align, children, className, onClick, prefixCls }, restProps] =
+     splitObject(this.props,
+       ['type', 'overlay', 'trigger', 'align', 'children', 'className', 'onClick', 'prefixCls']);
     const cls = classNames({
-      'ant-dropdown-button': true,
+      [prefixCls]: true,
       [className]: !!className,
     });
     return (

components/dropdown/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@dropdown-prefix-cls: ant-dropdown;
+@dropdown-prefix-cls: ~"@{ant-prefix}-dropdown";
 
 .@{dropdown-prefix-cls} {
   position: absolute;
@@ -16,17 +16,17 @@
   &-wrap {
     position: relative;
 
-    .ant-btn > .@{iconfont-css-prefix}-down {
+    .@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
       .iconfont-size-under-12px(10px);
     }
 
-    .anticon-down:before {
+    .@{iconfont-css-prefix}-down:before {
       transition: transform 0.2s ease;
     }
   }
 
   &-wrap-open {
-    .anticon-down:before {
+    .@{iconfont-css-prefix}-down:before {
       transform: rotate(180deg);
     }
   }
@@ -156,17 +156,17 @@
 
 .@{dropdown-prefix-cls}-link {
   font-size: 12px;
-  .anticon-down {
+  .@{iconfont-css-prefix}-down {
     .iconfont-size-under-12px(8px);
     font-weight: bold;
   }
 }
 
 .@{dropdown-prefix-cls}-button {
-  &.ant-btn-group > .ant-btn:last-child:not(:first-child) {
+  &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
     padding-right: 7px;
   }
-  .anticon-down {
+  .@{iconfont-css-prefix}-down {
     .iconfont-size-under-12px(10px);
   }
 }

components/form/style/index.less

@@ -5,7 +5,7 @@
 @import "../../layout/style/mixin";
 @import "./mixin";
 
-@form-prefix-cls: ant-form;
+@form-prefix-cls: ~"@{ant-prefix}-form";
 
 .reset-form();
 
@@ -38,10 +38,10 @@ input[type="checkbox"] {
 }
 
 // These classes are used directly on <label>s
-.ant-radio-inline,
-.ant-radio-vertical,
-.ant-checkbox-inline,
-.ant-checkbox-vertical {
+.@{ant-prefix}-radio-inline,
+.@{ant-prefix}-radio-vertical,
+.@{ant-prefix}-checkbox-inline,
+.@{ant-prefix}-checkbox-vertical {
   &.disabled,
   fieldset[disabled] & {
     cursor: @cursor-disabled;
@@ -49,8 +49,8 @@ input[type="checkbox"] {
 }
 
 // These classes are used on elements with <label> descendants
-.ant-radio,
-.ant-checkbox {
+.@{ant-prefix}-radio,
+.@{ant-prefix}-checkbox {
   &.disabled,
   fieldset[disabled] & {
     label {
@@ -100,7 +100,7 @@ input[type="checkbox"] {
     }
   }
 
-  .ant-switch {
+  .@{ant-prefix}-switch {
     margin: 4px 0;
   }
 
@@ -132,17 +132,17 @@ input[type="checkbox"] {
 // 表单下的输入框尺寸唯一: 大尺寸
 form {
   .has-feedback {
-    .ant-input {
+    .@{ant-prefix}-input {
       padding-right: 24px;
     }
   }
 
-  textarea.ant-input {
+  textarea.@{ant-prefix}-input {
     height: auto;
   }
 
   // input[type=file]
-  .ant-upload {
+  .@{ant-prefix}-upload {
     background: transparent;
   }
 
@@ -153,8 +153,8 @@ form {
   }
 
   // Radios and checkboxes on same line
-  .ant-radio-inline,
-  .ant-checkbox-inline {
+  .@{ant-prefix}-radio-inline,
+  .@{ant-prefix}-checkbox-inline {
     display: inline-block;
     vertical-align: middle;
     font-weight: normal;
@@ -166,30 +166,30 @@ form {
     }
   }
 
-  .ant-checkbox-vertical,
-  .ant-radio-vertical {
+  .@{ant-prefix}-checkbox-vertical,
+  .@{ant-prefix}-radio-vertical {
     display: block;
   }
 
-  .ant-checkbox-vertical + .ant-checkbox-vertical,
-  .ant-radio-vertical + .ant-radio-vertical {
+  .@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
+  .@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
     margin-left: 0;
   }
 
-  .ant-input-number {
+  .@{ant-prefix}-input-number {
     margin-top: -1px;
     margin-right: 8px;
   }
 
-  .ant-select,
-  .ant-cascader-picker {
+  .@{ant-prefix}-select,
+  .@{ant-prefix}-cascader-picker {
     width: 100%;
   }
 }
 
 // Input combined with select
-.ant-input-group-wrap {
-  .ant-select-selection {
+.@{ant-prefix}-input-group-wrap {
+  .@{ant-prefix}-select-selection {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
     &:hover {
@@ -197,18 +197,18 @@ form {
     }
   }
 
-  .ant-select-selection--single {
+  .@{ant-prefix}-select-selection--single {
     margin-left: -1px;
     height: @input-height-lg;
     background-color: #eee;
-    .ant-select-selection__rendered {
+    .@{ant-prefix}-select-selection__rendered {
       padding-left: 8px;
       padding-right: 25px;
       line-height: 30px;
     }
   }
 
-  .ant-select-open .ant-select-selection {
+  .@{ant-prefix}-select-open .@{ant-prefix}-select-selection {
     border-color: @border-color-base;
     box-shadow: none;
   }
@@ -221,8 +221,8 @@ form {
     .make-row;
   }
 
-  .ant-radio-inline,
-  .ant-checkbox-inline {
+  .@{ant-prefix}-radio-inline,
+  .@{ant-prefix}-checkbox-inline {
     vertical-align: baseline;
   }
 }
@@ -317,7 +317,7 @@ form {
 }
 
 .has-success {
-  .ant-input {
+  .@{ant-prefix}-input {
     border-color: @input-border-color;
     box-shadow: none;
   }
@@ -337,7 +337,7 @@ form {
   }
 
   //select
-  .ant-select {
+  .@{ant-prefix}-select {
     &-selection {
       border-color: @warning-color;
       .active(@warning-color);
@@ -348,17 +348,17 @@ form {
   }
 
   //datepicker
-  .ant-calendar-picker-icon:after {
+  .@{ant-prefix}-calendar-picker-icon:after {
     color: @warning-color;
   }
 
   //timepicker
-  .ant-time-picker-icon:after {
+  .@{ant-prefix}-time-picker-icon:after {
     color: @warning-color;
   }
 
   //input-number
-  .ant-input-number {
+  .@{ant-prefix}-input-number {
     border-color: @warning-color;
     .active(@warning-color);
     &:not([disabled]):hover {
@@ -376,7 +376,7 @@ form {
   }
 
   //select
-  .ant-select {
+  .@{ant-prefix}-select {
     &-selection {
       border-color: @error-color;
       .active(@error-color);
@@ -388,26 +388,26 @@ form {
   }
 
   //datepicker
-  .ant-calendar-picker-icon:after {
+  .@{ant-prefix}-calendar-picker-icon:after {
     color: @error-color;
   }
 
   //timepicker
-  .ant-time-picker-picker-icon:after {
+  .@{ant-prefix}-time-picker-picker-icon:after {
     color: @error-color;
   }
 
   //input-number
-  .ant-input-number {
+  .@{ant-prefix}-input-number {
     border-color: @error-color;
     .active(@error-color);
     &:not([disabled]):hover {
       border-color: @error-color;
     }
   }
-  .ant-mention-wrapper,
-  .ant-mention-wrapper.active {
-    .ant-mention-editor {
+  .@{ant-prefix}-mention-wrapper,
+  .@{ant-prefix}-mention-wrapper.active {
+    .@{ant-prefix}-mention-editor {
       border-color: @error-color;
       .active(@error-color);
       &:not([disabled]):hover,
@@ -428,13 +428,13 @@ form {
   }
 }
 
-.ant-advanced-search-form {
+.@{ant-prefix}-advanced-search-form {
   .@{form-prefix-cls}-item {
     margin-bottom: 16px;
   }
-  .ant-input,
-  .ant-input-group .ant-input,
-  .ant-input-group .ant-input-group-addon {
+  .@{ant-prefix}-input,
+  .@{ant-prefix}-input-group .@{ant-prefix}-input,
+  .@{ant-prefix}-input-group .@{ant-prefix}-input-group-addon {
     height: 28px;
   }
 }

components/form/style/mixin.less

 @import "../../input/style/mixin";
 
 .form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
-  .ant-form-explain,
-  .ant-form-split {
+  .@{ant-prefix}-form-explain,
+  .@{ant-prefix}-form-split {
     color: @text-color;
   }
   // 输入框的不同校验状态
-  .ant-input {
+  .@{ant-prefix}-input {
     &,
     &:hover,
     &:focus {
@@ -19,11 +19,11 @@
     }
   }
 
-  .ant-calendar-picker-open .ant-calendar-picker-input {
+  .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
     .active(@border-color);
   }
 
-  .ant-input-group-addon {
+  .@{ant-prefix}-input-group-addon {
     color: @text-color;
     border-color: @border-color;
     background-color: @background-color;

components/input-number/style/index.less

@@ -2,7 +2,7 @@
 @import "../../style/mixins/index";
 @import "../../input/style/mixin";
 
-@input-number-prefix-cls: ant-input-number;
+@input-number-prefix-cls: ~"@{ant-prefix}-input-number";
 
 .handler-disabled() {
   opacity: 0.72;

components/input/Group.tsx

@@ -6,13 +6,14 @@ export interface GroupProps {
   size?: 'large' | 'small' | 'default';
   children?: any;
   style?: React.CSSProperties;
+  prefixCls?: string;
 }
 
 const Group: React.StatelessComponent<GroupProps> = (props) => {
   const className = classNames({
-    'ant-input-group': true,
-    'ant-input-group-lg': props.size === 'large',
-    'ant-input-group-sm': props.size === 'small',
+    [props.prefixCls]: true,
+    [`${props.prefixCls}-lg`]: props.size === 'large',
+    [`${props.prefixCls}-sm`]: props.size === 'small',
     [props.className]: !!props.className,
   });
   return (
@@ -26,4 +27,8 @@ Group.propTypes = {
   children: React.PropTypes.any,
 };
 
+Group.defaultProps = {
+  prefixCls: 'ant-input-group',
+};
+
 export default Group;

components/input/style/index.less

@@ -4,11 +4,11 @@
 @import "./search-input";
 
 // Input styles
-.ant-input {
+.@{ant-prefix}-input {
   .input;
 }
 
 //== Style for input-group: input with label, with button or dropdown...
-.ant-input-group {
-  .input-group(~"ant-input");
+.@{ant-prefix}-input-group {
+  .input-group(~"@{ant-prefix}-input");
 }

components/input/style/mixin.less

@@ -160,10 +160,10 @@
     border-radius: @border-radius-base;
 
     // Reset Select's style in addon
-    .ant-select {
+    .@{ant-prefix}-select {
       margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);  // lesshint spaceAroundOperator: false
 
-      .ant-select-selection {
+      .@{ant-prefix}-select-selection {
         background-color: inherit;
         border: 0;
         margin: -1px;
@@ -172,7 +172,7 @@
 
       &-open,
       &-focused {
-        .ant-select-selection {
+        .@{ant-prefix}-select-selection {
           border-color: tint(@primary-color, 20%);
         }
       }
@@ -187,7 +187,7 @@
     border-top-right-radius: 0;
 
     // Reset Select's style in addon
-    .ant-select .ant-select-selection {
+    .@{ant-prefix}-select .@{ant-prefix}-select-selection {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
     }
@@ -206,7 +206,7 @@
     border-top-left-radius: 0;
 
     // Reset Select's style in addon
-    .ant-select .ant-select-selection {
+    .@{ant-prefix}-select .@{ant-prefix}-select-selection {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }

components/input/style/search-input.less

@@ -3,21 +3,21 @@
 @import "../../button/style/mixin";
 @import "./mixin";
 
-.ant-search-input-wrapper {
+.@{ant-prefix}-search-input-wrapper {
   display: inline-block;
   vertical-align: middle;
 }
 
-.ant-search-input {
-  &.ant-input-group .ant-input:first-child,
-  &.ant-input-group .ant-select:first-child {
+.@{ant-prefix}-search-input {
+  &.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child,
+  &.@{ant-prefix}-input-group .@{ant-prefix}-select:first-child {
     border-radius: @border-radius-base;
     position: absolute;
     top: -1px;
     width: 100%;
   }
 
-  .ant-search-btn {
+  .@{ant-prefix}-search-btn {
     .btn-default;
     border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
     left: -1px;
@@ -34,12 +34,12 @@
       padding-bottom: 6px;
     }
   }
-  &&-focus .ant-search-btn-noempty,
-  &:hover .ant-search-btn-noempty {
+  &&-focus .@{ant-prefix}-search-btn-noempty,
+  &:hover .@{ant-prefix}-search-btn-noempty {
     .btn-primary;
   }
-  .ant-select-combobox {
-    .ant-select-selection__rendered {
+  .@{ant-prefix}-select-combobox {
+    .@{ant-prefix}-select-selection__rendered {
       right: 29px;
     }
   }

components/layout/col.tsx

@@ -26,11 +26,12 @@ export interface ColProps {
   sm?: ColSize;
   md?: ColSize;
   lg?: ColSize;
+  prefixCls?: string;
 }
 
 const Col: React.StatelessComponent<ColProps> = (props) => {
-  const [{ span, order, offset, push, pull, className, children }, others] = splitObject(props,
-    ['span', 'order', 'offset', 'push', 'pull', 'className', 'children']);
+  const [{ span, order, offset, push, pull, className, children, prefixCls = 'ant-col' }, others] = splitObject(props,
+    ['span', 'order', 'offset', 'push', 'pull', 'className', 'children', 'prefixCls']);
   let sizeClassObj = {};
   ['xs', 'sm', 'md', 'lg'].forEach(size => {
     let sizeProps: ColSize = {};
@@ -43,19 +44,19 @@ const Col: React.StatelessComponent<ColProps> = (props) => {
     delete others[size];
 
     sizeClassObj = assign({}, sizeClassObj, {
-      [`ant-col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-      [`ant-col-${size}-order-${sizeProps.order}`]: sizeProps.order,
-      [`ant-col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
-      [`ant-col-${size}-push-${sizeProps.push}`]: sizeProps.push,
-      [`ant-col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
+      [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+      [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order,
+      [`${prefixCls}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
+      [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push,
+      [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
     });
   });
   const classes = classNames(assign({}, {
-    [`ant-col-${span}`]: span !== undefined,
-    [`ant-col-order-${order}`]: order,
-    [`ant-col-offset-${offset}`]: offset,
-    [`ant-col-push-${push}`]: push,
-    [`ant-col-pull-${pull}`]: pull,
+    [`${prefixCls}-${span}`]: span !== undefined,
+    [`${prefixCls}-order-${order}`]: order,
+    [`${prefixCls}-offset-${offset}`]: offset,
+    [`${prefixCls}-push-${push}`]: push,
+    [`${prefixCls}-pull-${pull}`]: pull,
     [className]: !!className,
   }, sizeClassObj));
 

components/layout/row.tsx

@@ -11,11 +11,13 @@ export interface RowProps {
   align?: 'top' | 'middle' | 'bottom';
   justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
   style?: React.CSSProperties;
+  prefixCls?: string;
 }
 
 export default class Row extends React.Component<RowProps, any> {
   static defaultProps = {
     gutter: 0,
+    prefixCls: 'ant-row',
   };
   static propTypes = {
     type: React.PropTypes.string,
@@ -24,15 +26,16 @@ export default class Row extends React.Component<RowProps, any> {
     className: React.PropTypes.string,
     children: React.PropTypes.node,
     gutter: React.PropTypes.number,
+    prefixCls: React.PropTypes.string,
   };
   render() {
-    const [{ type, justify, align, className, gutter, style, children }, others] = splitObject(this.props,
-      ['type', 'justify', 'align', 'className', 'gutter', 'style', 'children']);
+    const [{ type, justify, align, className, gutter, style, children, prefixCls }, others] = splitObject(this.props,
+      ['type', 'justify', 'align', 'className', 'gutter', 'style', 'children', 'prefixCls']);
     const classes = classNames({
-      'ant-row': !type,
-      [`ant-row-${type}`]: type,
-      [`ant-row-${type}-${justify}`]: justify,
-      [`ant-row-${type}-${align}`]: align,
+      [prefixCls]: !type,
+      [`${prefixCls}-${type}`]: type,
+      [`${prefixCls}-${type}-${justify}`]: justify,
+      [`${prefixCls}-${type}-${align}`]: align,
       [className]: className,
     });
     const rowStyle = gutter > 0 ? assign({}, {

components/layout/style/index.less

@@ -3,12 +3,12 @@
 @import "./mixin";
 
 // Grid system
-.ant-row {
+.@{ant-prefix}-row {
   .make-row();
   display: block;
 }
 
-.ant-row-flex {
+.@{ant-prefix}-row-flex {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -20,46 +20,46 @@
 }
 
 // x轴原点
-.ant-row-flex-start {
+.@{ant-prefix}-row-flex-start {
   justify-content: flex-start;
 }
 
 // x轴居中
-.ant-row-flex-center {
+.@{ant-prefix}-row-flex-center {
   justify-content: center;
 }
 
 // x轴反方向
-.ant-row-flex-end {
+.@{ant-prefix}-row-flex-end {
   justify-content: flex-end;
 }
 
 // x轴平分
-.ant-row-flex-space-between {
+.@{ant-prefix}-row-flex-space-between {
   justify-content: space-between;
 }
 
 // x轴有间隔地平分
-.ant-row-flex-space-around {
+.@{ant-prefix}-row-flex-space-around {
   justify-content: space-around;
 }
 
 // 顶部对齐
-.ant-row-flex-top {
+.@{ant-prefix}-row-flex-top {
   align-items: flex-start;
 }
 
 // 居中对齐
-.ant-row-flex-middle {
+.@{ant-prefix}-row-flex-middle {
   align-items: center;
 }
 
 // 底部对齐
-.ant-row-flex-bottom {
+.@{ant-prefix}-row-flex-bottom {
   align-items: flex-end;
 }
 
-.ant-col {
+.@{ant-prefix}-col {
   position: relative;
   display: block;
 }

components/layout/style/mixin.less

@@ -12,11 +12,11 @@
 
 .make-grid-columns() {
   .col(@index) {
-    @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
+    @item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}";
     .col((@index + 1), @item);
   }
   .col(@index, @list) when (@index =< @grid-columns) {
-    @item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
+    @item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}";
     .col((@index + 1), ~"@{list}, @{item}");
   }
   .col(@index, @list) when (@index > @grid-columns) {
@@ -33,11 +33,11 @@
 
 .float-grid-columns(@class) {
   .col(@index) { // initial
-    @item: ~".ant-col@{class}-@{index}";
+    @item: ~".@{ant-prefix}-col@{class}-@{index}";
     .col((@index + 1), @item);
   }
   .col(@index, @list) when (@index =< @grid-columns) { // general
-    @item: ~".ant-col@{class}-@{index}";
+    @item: ~".@{ant-prefix}-col@{class}-@{index}";
     .col((@index + 1), ~"@{list}, @{item}");
   }
   .col(@index, @list) when (@index > @grid-columns) { // terminal
@@ -51,33 +51,33 @@
 
 // lesshint false
 .loop-grid-columns(@index, @class) when (@index > 0) {
-  .ant-col@{class}-@{index} {
+  .@{ant-prefix}-col@{class}-@{index} {
     display: block;
     width: percentage((@index / @grid-columns));
   }
-  .ant-col@{class}-push-@{index} {
+  .@{ant-prefix}-col@{class}-push-@{index} {
     left: percentage((@index / @grid-columns));
   }
-  .ant-col@{class}-pull-@{index} {
+  .@{ant-prefix}-col@{class}-pull-@{index} {
     right: percentage((@index / @grid-columns));
   }
-  .ant-col@{class}-offset-@{index} {
+  .@{ant-prefix}-col@{class}-offset-@{index} {
     margin-left: percentage((@index / @grid-columns));
   }
-  .ant-col@{class}-order-@{index} {
+  .@{ant-prefix}-col@{class}-order-@{index} {
     order: @index;
   }
   .loop-grid-columns((@index - 1), @class);
 }
 
 .loop-grid-columns(@index, @class) when (@index = 0) {
-  .ant-col@{class}-@{index} {
+  .@{ant-prefix}-col@{class}-@{index} {
     display: none;
   }
-  .ant-col-push-@{index} {
+  .@{ant-prefix}-col-push-@{index} {
     left: auto;
   }
-  .ant-col-pull-@{index} {
+  .@{ant-prefix}-col-pull-@{index} {
     right: auto;
   }
 }

components/mention/style/index.less

@@ -2,20 +2,20 @@
 @import "../../style/mixins/index";
 @import '../../input/style/mixin.less';
 
-.ant-mention-wrapper {
+.@{ant-prefix}-mention-wrapper {
   position: relative;
   display: inline-block;
   width: 100%;
   vertical-align: middle;
-  &.active .ant-mention-editor {
+  &.active .@{ant-prefix}-mention-editor {
     .active;
   }
-  .ant-mention-editor {
+  .@{ant-prefix}-mention-editor {
    .input;
    padding: 0;
    display: block;
   }
-  .ant-mention-editor-wrapper {
+  .@{ant-prefix}-mention-editor-wrapper {
     overflow-y: auto;
     height: auto;
   }
@@ -25,7 +25,7 @@
     padding: 4px 7px;
   }
 
-  .ant-mention-dropdown {
+  .@{ant-prefix}-mention-dropdown {
     margin-top: 1.5em;
     max-height: 250px;
     min-width: 120px;
@@ -42,10 +42,10 @@
     overflow-x: hidden;
     overflow-y: auto;
     font-size: @font-size-base;
-    &-notfound.ant-mention-dropdown-item {
+    &-notfound.@{ant-prefix}-mention-dropdown-item {
       color: #ccc;
 
-      .anticon-loading {
+      .@{iconfont-css-prefix}-loading {
         color: @primary-color;
       }
     }

components/menu/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@menu-prefix-cls: ant-menu;
+@menu-prefix-cls: ~"@{ant-prefix}-menu";
 
 // default theme
 .@{menu-prefix-cls} {
@@ -164,7 +164,7 @@
       }
     }
 
-    .anticon {
+    .@{iconfont-css-prefix} {
       min-width: 14px;
       margin-right: 8px;
     }

components/message/style/index.less

 @import "../../style/themes/default";
 
-@message-prefix-cls: ant-message;
+@message-prefix-cls: ~"@{ant-prefix}-message";
 
 .@{message-prefix-cls} {
   font-size: 12px;
@@ -28,24 +28,24 @@
     display: block;
   }
 
-  &-success .anticon {
+  &-success .@{iconfont-css-prefix} {
     color: @success-color;
   }
 
-  &-error .anticon {
+  &-error .@{iconfont-css-prefix} {
     color: @error-color;
   }
 
-  &-warning .anticon {
+  &-warning .@{iconfont-css-prefix} {
     color: @warning-color;
   }
 
-  &-info .anticon,
-  &-loading .anticon {
+  &-info .@{iconfont-css-prefix},
+  &-loading .@{iconfont-css-prefix} {
     color: @primary-color;
   }
 
-  .anticon {
+  .@{iconfont-css-prefix} {
     margin-right: 8px;
     font-size: 14px;
     top: 1px;

components/modal/confirm.tsx

@@ -58,6 +58,7 @@ class ActionButton extends React.Component<ActionButtonProps, any> {
 
 export default function confirm(config) {
   const props = assign({ iconType: 'question-circle' }, config);
+  const prefixCls = props.prefixCls || 'ant-confirm';
   let div = document.createElement('div');
   document.body.appendChild(div);
 
@@ -83,17 +84,17 @@ export default function confirm(config) {
   }
 
   let body = (
-    <div className="ant-confirm-body">
+    <div className={`${prefixCls}-body`}>
       <Icon type={props.iconType} />
-      <span className="ant-confirm-title">{props.title}</span>
-      <div className="ant-confirm-content">{props.content}</div>
+      <span className={`${prefixCls}-title`}>{props.title}</span>
+      <div className={`${prefixCls}-content`}>{props.content}</div>
     </div>
   );
 
   let footer = null;
   if (props.okCancel) {
     footer = (
-      <div className="ant-confirm-btns">
+      <div className={`${prefixCls}-btns`}>
         <ActionButton type="ghost" actionFn={props.onCancel} closeModal={close}>
           {props.cancelText}
         </ActionButton>
@@ -104,7 +105,7 @@ export default function confirm(config) {
     );
   } else {
     footer = (
-      <div className="ant-confirm-btns">
+      <div className={`${prefixCls}-btns`}>
         <ActionButton type="primary" actionFn={props.onOk} closeModal={close}>
           {props.okText}
         </ActionButton>
@@ -113,8 +114,8 @@ export default function confirm(config) {
   }
 
   const classString = classNames({
-    'ant-confirm': true,
-    [`ant-confirm-${props.type}`]: true,
+    [prefixCls]: true,
+    [`${prefixCls}-${props.type}`]: true,
     [props.className]: !!props.className,
   });
 

components/modal/style/confirm.less

-@confirm-prefix-cls: ant-confirm;
+@confirm-prefix-cls: ~"@{ant-prefix}-confirm";
 
 .@{confirm-prefix-cls} {
-  .ant-modal-header {
+  .@{ant-prefix}-modal-header {
     display: none;
   }
 
-  .ant-modal-body {
+  .@{ant-prefix}-modal-body {
     padding: 30px 40px;
   }
 
@@ -23,7 +23,7 @@
       margin-top: 8px;
     }
 
-    > .anticon {
+    > .@{iconfont-css-prefix} {
       font-size: 24px;
       margin-right: 10px;
       padding: 0 1px;
@@ -42,20 +42,20 @@
     }
   }
 
-  &-error &-body > .anticon {
+  &-error &-body > .@{iconfont-css-prefix} {
     color: @error-color;
   }
 
-  &-warning &-body > .anticon,
-  &-confirm &-body > .anticon {
+  &-warning &-body > .@{iconfont-css-prefix},
+  &-confirm &-body > .@{iconfont-css-prefix} {
     color: @warning-color;
   }
 
-  &-info &-body > .anticon {
+  &-info &-body > .@{iconfont-css-prefix} {
     color: @primary-color;
   }
 
-  &-success &-body > .anticon {
+  &-success &-body > .@{iconfont-css-prefix} {
     color: @success-color;
   }
 }

components/modal/style/modal.less

-@dialog-prefix-cls: ant-modal;
+@dialog-prefix-cls: ~"@{ant-prefix}-modal";
 
 .@{dialog-prefix-cls} {
   position: relative;

components/notification/index.tsx

@@ -16,12 +16,12 @@ export interface ArgsProps {
   icon?: React.ReactNode;
 }
 
-function getNotificationInstance() {
+function getNotificationInstance(prefixCls) {
   if (notificationInstance) {
     return notificationInstance;
   }
   notificationInstance = (Notification as any).newInstance({
-    prefixCls: 'ant-notification',
+    prefixCls: prefixCls,
     style: {
       top: defaultTop,
       right: 0,
@@ -31,7 +31,8 @@ function getNotificationInstance() {
 }
 
 function notice(args) {
-  const prefixCls = args.prefixCls || 'ant-notification-notice';
+  const outerPrefixCls = args.prefixCls || 'ant-notification';
+  const prefixCls = `${outerPrefixCls}-notice`;
 
   let duration;
   if (args.duration === undefined) {
@@ -69,7 +70,7 @@ function notice(args) {
     iconNode = <Icon className={`${prefixCls}-icon ${prefixCls}-icon-${args.type}`} type={iconType} />;
   }
 
-  getNotificationInstance().notice({
+  getNotificationInstance(outerPrefixCls).notice({
     content: (
       <div className={`${prefixCls}-content ${iconNode ? `${prefixCls}-with-icon` : ''}`}>
         {iconNode}

components/notification/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@notification-prefix-cls: ant-notification;
+@notification-prefix-cls: ~"@{ant-prefix}-notification";
 @notification-width: 335px;
 @notification-padding: 16px;
 @notification-margin-bottom: 10px;

components/pagination/Pagination.tsx

@@ -34,6 +34,8 @@ export interface PaginationProps {
   style?: React.CSSProperties;
   className?: string;
   locale?: Object;
+  prefixCls?: string;
+  selectPrefixCls?: string;
 }
 
 export interface PaginationContext {
@@ -47,6 +49,7 @@ export default class Pagination extends React.Component<PaginationProps, any> {
     locale: zhCN,
     className: '',
     prefixCls: 'ant-pagination',
+    selectPrefixCls: 'ant-select',
   };
 
   static contextTypes = {
@@ -73,7 +76,7 @@ export default class Pagination extends React.Component<PaginationProps, any> {
 
     return (
       <RcPagination selectComponentClass={selectComponentClass}
-        selectPrefixCls="ant-select"
+        selectPrefixCls={this.props.selectPrefixCls}
         {...this.props}
         locale={locale}
         className={className}

components/pagination/style/index.less

@@ -2,7 +2,7 @@
 @import "../../style/mixins/index";
 @import "../../input/style/mixin";
 
-@pagination-prefix-cls: ant-pagination;
+@pagination-prefix-cls: ~"@{ant-prefix}-pagination";
 
 .@{pagination-prefix-cls} {
   font-size: @font-size-base;

components/popover/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@popover-prefix-cls: ant-popover;
+@popover-prefix-cls: ~"@{ant-prefix}-popover";
 
 //** Popover body background color
 @popover-bg: #fff;
@@ -96,7 +96,7 @@
     padding: 8px 0 16px;
     font-size: 12px;
     color: @text-color;
-    > .anticon {
+    > .@{iconfont-css-prefix} {
       color: @warning-color;
       line-height: 17px;
       position: absolute;

components/progress/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@progress-prefix-cls: ant-progress;
+@progress-prefix-cls: ~"@{ant-prefix}-progress";
 
 .@{progress-prefix-cls} {
   display: inline-block;
@@ -46,7 +46,7 @@
     vertical-align: middle;
     display: inline-block;
     font-family: tahoma;
-    .anticon {
+    .@{iconfont-css-prefix} {
       font-size: 12px;
     }
   }
@@ -62,7 +62,7 @@
       bottom: 0;
       background: #fff;
       border-radius: 10px;
-      animation: ant-progress-active 2s @ease-out-quint infinite;
+      animation: ~"@{ant-prefix}-progress-active" 2s @ease-out-quint infinite;
     }
   }
 
@@ -102,7 +102,7 @@
     font-family: tahoma;
     margin: 0;
 
-    .anticon {
+    .@{iconfont-css-prefix} {
       font-size: 14 / 12em;
     }
   }
@@ -119,7 +119,7 @@
   }
 }
 
-@keyframes ant-progress-active {
+@keyframes ~"@{ant-prefix}-progress-active" {
   0% {
     opacity: .3;
     width: 0;

components/radio/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@radio-prefix-cls: ant-radio;
+@radio-prefix-cls: ~"@{ant-prefix}-radio";
 @radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
 @radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
 @radio-duration: .2s;

components/rate/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@rate-prefix-cls: ant-rate;
+@rate-prefix-cls: ~"@{ant-prefix}-rate";
 @rate-star-color: #f5a623;
 
 .@{rate-prefix-cls} {

components/select/style/index.less

@@ -2,7 +2,7 @@
 @import "../../style/mixins/index";
 @import "../../input/style/mixin";
 
-@select-prefix-cls: ant-select;
+@select-prefix-cls: ~"@{ant-prefix}-select";
 
 .selection__clear() {
   display: inline-block;

components/slider/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@slider-prefix-cls: ant-slider;
+@slider-prefix-cls: ~"@{ant-prefix}-slider";
 // slider color
 @slider-disabled-color: #ccc;
 // tooltip

components/spin/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@spin-prefix-cls: ant-spin;
+@spin-prefix-cls: ~"@{ant-prefix}-spin";
 @spin-dot-default: #999;
 @spin-dot-size-sm: 12px;
 @spin-dot-size: 20px;
@@ -123,7 +123,7 @@
 
 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ */
-  .ant-spin-nested-loading > .ant-spin-container {
+  .@{ant-prefix}-spin-nested-loading > .@{ant-prefix}-spin-container {
     background: #fff;
     opacity: 0.5;
   }

components/steps/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@steps-prefix-cls: ant-steps;
+@steps-prefix-cls: ~"@{ant-prefix}-steps";
 @process-icon-color: @primary-color;
 @process-title-color: #666;
 @process-description-color: @process-title-color;
@@ -161,7 +161,7 @@
       color: @primary-color;
       position: relative;
 
-      &.anticon {
+      &.@{iconfont-css-prefix} {
         font-size: 12px;
         &-cross,
         &-check {
@@ -231,7 +231,7 @@
       border-radius: 18px;
       font-size: 12px;
       margin-right: 10px;
-      > .@{steps-prefix-cls}-icon.anticon {
+      > .@{steps-prefix-cls}-icon.@{iconfont-css-prefix} {
         .iconfont-size-under-12px(9px);
         top: 0;
       }

components/style/core/base.less

@@ -102,7 +102,7 @@ a {
   visibility: hidden;
 }
 
-.ant-divider {
+.@{ant-prefix}-divider {
   margin: 0 4px;
   color: #999;
   display: inline-block;

components/style/themes/default.less

+// Prefix
+@ant-prefix             : ant;
+
 // Color
 @primary-color          : #2db7f5;
 @info-color             : #2db7f5;

components/switch/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@switch-prefix-cls: ant-switch;
+@switch-prefix-cls: ~"@{ant-prefix}-switch";
 @switch-duration: .3s;
 
 .@{switch-prefix-cls} {

components/table/Table.tsx

@@ -63,6 +63,7 @@ export interface TableColumnConfig {
 
 export interface TableProps {
   prefixCls?: string;
+  dropdownPrefixCls?: string;
   rowSelection?: TableRowSelection;
   pagination?: any; // 等 Pagination 的 interface，以便直接引用
   size?: 'default' | 'small';
@@ -107,11 +108,13 @@ export default class Table extends React.Component<TableProps, any> {
     bordered: React.PropTypes.bool,
     onChange: React.PropTypes.func,
     locale: React.PropTypes.object,
+    dropdownPrefixCls: React.PropTypes.string,
   };
 
   static defaultProps = {
     dataSource: [],
     prefixCls: 'ant-table',
+    dropdownPrefixCls: 'ant-dropdown',
     useFixedHeader: false,
     rowSelection: null,
     className: '',
@@ -561,6 +564,7 @@ export default class Table extends React.Component<TableProps, any> {
   }
 
   renderRowSelection() {
+    const prefixCls = this.props.prefixCls;
     const columns = this.props.columns.concat();
     if (this.props.rowSelection) {
       const data = this.getFlatCurrentPageData().filter((item) => {
@@ -587,7 +591,7 @@ export default class Table extends React.Component<TableProps, any> {
         selectionColumn = {
           key: 'selection-column',
           render: this.renderSelectionRadio,
-          className: 'ant-table-selection-column',
+          className: `${prefixCls}-selection-column`,
         };
       } else {
         const checkboxAllDisabled = data.every(item => this.getCheckboxPropsByItem(item).disabled);
@@ -601,7 +605,7 @@ export default class Table extends React.Component<TableProps, any> {
           key: 'selection-column',
           title: checkboxAll,
           render: this.renderSelectionCheckBox,
-          className: 'ant-table-selection-column',
+          className: `${prefixCls}-selection-column`,
         };
       }
       if (columns.some(column => column.fixed === 'left' || column.fixed === true)) {
@@ -637,6 +641,7 @@ export default class Table extends React.Component<TableProps, any> {
   }
 
   renderColumnsDropdown(columns) {
+    const { prefixCls, dropdownPrefixCls } = this.props;
     const { sortOrder } = this.state;
     const locale = this.getLocale();
     return treeMap(columns, (originColumn, i) => {
@@ -652,6 +657,8 @@ export default class Table extends React.Component<TableProps, any> {
             column={column}
             selectedKeys={colFilters}
             confirmFilter={this.handleFilter}
+            prefixCls={`${prefixCls}-filter`}
+            dropdownPrefixCls={dropdownPrefixCls}
           />
         );
       }
@@ -660,20 +667,20 @@ export default class Table extends React.Component<TableProps, any> {
         if (isSortColumn) {
           column.className = column.className || '';
           if (sortOrder) {
-            column.className += ' ant-table-column-sort';
+            column.className += ` ${prefixCls}-column-sort`;
           }
         }
         const isAscend = isSortColumn && sortOrder === 'ascend';
         const isDescend = isSortColumn && sortOrder === 'descend';
         sortButton = (
-          <div className="ant-table-column-sorter">
-            <span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
+          <div className={`${prefixCls}-column-sorter`}>
+            <span className={`${prefixCls}-column-sorter-up ${isAscend ? 'on' : 'off'}`}
               title="↑"
               onClick={() => this.toggleSortOrder('ascend', column)}
             >
               <Icon type="caret-up" />
             </span>
-            <span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
+            <span className={`${prefixCls}-column-sorter-down ${isDescend ? 'on' : 'off'}`}
               title="↓"
               onClick={() => this.toggleSortOrder('descend', column)}
             >
@@ -821,17 +828,17 @@ export default class Table extends React.Component<TableProps, any> {
 
   render() {
     const [{
-      style, className,
-    }, restProps] = splitObject(this.props, ['style', 'className']);
+      style, className, prefixCls,
+    }, restProps] = splitObject(this.props, ['style', 'className', 'prefixCls']);
     const data = this.getCurrentPageData();
     let columns = this.renderRowSelection();
     const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
     const locale = this.getLocale();
 
     const classString = classNames({
-      [`ant-table-${this.props.size}`]: true,
-      'ant-table-bordered': this.props.bordered,
-      'ant-table-empty': !data.length,
+      [`${prefixCls}-${this.props.size}`]: true,
+      [`${prefixCls}-bordered`]: this.props.bordered,
+      [`${prefixCls}-empty`]: !data.length,
     });
 
     columns = this.renderColumnsDropdown(columns);
@@ -854,9 +861,9 @@ export default class Table extends React.Component<TableProps, any> {
     // if there is no pagination or no data,
     // the height of spin should decrease by half of pagination
     const paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
-            ? 'ant-table-with-pagination'
-            : 'ant-table-without-pagination';
-    const spinClassName = this.props.loading ? `${paginationPatchClass} ant-table-spin-holder` : '';
+            ? `${prefixCls}-with-pagination`
+            : `${prefixCls}-without-pagination`;
+    const spinClassName = this.props.loading ? `${paginationPatchClass} ${prefixCls}-spin-holder` : '';
     table = <Spin className={spinClassName} spinning={this.props.loading}>{table}</Spin>;
     return (
       <div className={`${className} clearfix`} style={style}>

components/table/filterDropdown.tsx

@@ -8,9 +8,11 @@ import Radio from '../radio';
 export interface FilterDropdownMenuWrapperProps {
   onClick?: Function;
   children?: any;
+  prefixCls?: string;
 }
-const FilterDropdownMenuWrapper: React.StatelessComponent<FilterDropdownMenuWrapperProps> = ({ onClick, children }) => (
-  <div className="ant-table-filter-dropdown" onClick={onClick}>{children}</div>
+const FilterDropdownMenuWrapper: React.StatelessComponent<FilterDropdownMenuWrapperProps> =
+  ({ onClick, children, prefixCls }) => (
+  <div className={`${prefixCls}-filter-dropdown`} onClick={onClick}>{children}</div>
 );
 
 export interface FilterMenuProps {
@@ -22,6 +24,8 @@ export interface FilterMenuProps {
     filters?: string[]
   };
   confirmFilter: (column: Object, selectedKeys: string[]) => any;
+  prefixCls: string;
+  dropdownPrefixCls: string;
 }
 
 export default class FilterMenu extends React.Component<FilterMenuProps, any> {
@@ -100,7 +104,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
         const containSelected = Object.keys(keyPathOfSelectedItem).some(
           key => keyPathOfSelectedItem[key].indexOf(item.value) >= 0
         );
-        const subMenuCls = containSelected ? 'ant-dropdown-submenu-contain-selected' : '';
+        const subMenuCls = containSelected ? `${this.props.dropdownPrefixCls}-submenu-contain-selected` : '';
         return (
           <SubMenu title={item.text} className={subMenuCls} key={item.value.toString()}>
             {item.children.map(child => this.renderMenuItem(child))}
@@ -127,31 +131,31 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
   }
 
   render() {
-    const { column, locale } = this.props;
+    const { column, locale, prefixCls, dropdownPrefixCls } = this.props;
     // default multiple selection in filter dropdown
     const multiple = ('filterMultiple' in column) ? column.filterMultiple : true;
 
     const menus = column.filterDropdown ? column.filterDropdown : (
-      <FilterDropdownMenuWrapper>
+      <FilterDropdownMenuWrapper prefixCls="">
         <Menu
           multiple={multiple}
           onClick={this.handleMenuItemClick}
-          prefixCls="ant-dropdown-menu"
+          prefixCls={`${dropdownPrefixCls}-menu`}
           onSelect={this.setSelectedKeys}
           onDeselect={this.setSelectedKeys}
           selectedKeys={this.state.selectedKeys}
         >
           {this.renderMenus(column.filters)}
         </Menu>
-        <div className="ant-table-filter-dropdown-btns">
+        <div className={`${prefixCls}-dropdown-btns`}>
           <a
-            className="ant-table-filter-dropdown-link confirm"
+            className={`${prefixCls}-dropdown-link confirm`}
             onClick={this.handleConfirm}
           >
             {locale.filterConfirm}
           </a>
           <a
-            className="ant-table-filter-dropdown-link clear"
+            className={`${prefixCls}-dropdown-link clear`}
             onClick={this.handleClearFilters}
           >
             {locale.filterReset}
@@ -161,7 +165,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
     );
 
     const dropdownSelectedClass = (this.props.selectedKeys.length > 0)
-      ? 'ant-table-filter-selected' : '';
+      ? `${prefixCls}-selected` : '';
 
     return (
       <Dropdown

components/table/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@table-prefix-cls: ant-table;
+@table-prefix-cls: ~"@{ant-prefix}-table";
 @table-head-background-color: @background-color-base;
 
 .@{table-prefix-cls} {
@@ -31,7 +31,7 @@
     transition: background .3s ease;
     text-align: left;
 
-    .anticon-filter {
+    .@{iconfont-css-prefix}-filter {
       margin-left: 4px;
       .iconfont-size-under-12px(10px);
       cursor: pointer;
@@ -42,7 +42,7 @@
       }
     }
 
-    .@{table-prefix-cls}-filter-selected.anticon-filter {
+    .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
       color: @primary-color;
     }
   }
@@ -208,18 +208,18 @@
       display: block;
       width: 12px;
       cursor: pointer;
-      &:hover .anticon {
+      &:hover .@{iconfont-css-prefix} {
         color: #666;
       }
       &.on {
-        .anticon-caret-up,
-        .anticon-caret-down {
+        .@{iconfont-css-prefix}-caret-up,
+        .@{iconfont-css-prefix}-caret-down {
           color: @primary-color;
         }
       }
     }
-    .anticon-caret-up,
-    .anticon-caret-down {
+    .@{iconfont-css-prefix}-caret-up,
+    .@{iconfont-css-prefix}-caret-down {
       .iconfont-size-under-12px(6px);
       line-height: 6px;
       height: 6px;
@@ -287,7 +287,7 @@
     z-index: 2;
     font-size: 12px;
     color: #999;
-    .anticon {
+    .@{iconfont-css-prefix} {
       margin-right: 4px;
     }
   }
@@ -305,7 +305,7 @@
     border: 1px solid @border-color-base;
     box-shadow: @box-shadow-base;
 
-    .ant-dropdown-menu {
+    .@{ant-prefix}-dropdown-menu {
       border: 0;
       box-shadow: none;
       border-radius: @border-radius-base @border-radius-base 0 0;
@@ -320,8 +320,8 @@
         box-shadow: @box-shadow-base;
       }
 
-      .ant-dropdown-submenu-contain-selected {
-        .ant-dropdown-menu-submenu-title:after {
+      .@{ant-prefix}-dropdown-submenu-contain-selected {
+        .@{ant-prefix}-dropdown-menu-submenu-title:after {
           color: @primary-color;
           font-weight: bold;
           text-shadow: 0 0 2px tint(@primary-color, 80%);
@@ -329,12 +329,12 @@
       }
     }
 
-    .ant-dropdown-menu-item {
+    .@{ant-prefix}-dropdown-menu-item {
       overflow: hidden;
     }
 
-    > .ant-dropdown-menu > .ant-dropdown-menu-item:last-child,
-    > .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title {
+    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child,
+    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-submenu:last-child .@{ant-prefix}-dropdown-menu-submenu-title {
       border-radius: 0;
     }
 

components/tabs/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@tab-prefix-cls: ant-tabs;
+@tab-prefix-cls: ~"@{ant-prefix}-tabs";
 
 .@{tab-prefix-cls} {
   box-sizing: border-box;
@@ -174,7 +174,7 @@
           color: shade(@primary-color, 5%);
         }
 
-        .anticon {
+        .@{iconfont-css-prefix} {
           width: 14px;
           height: 14px;
           margin-right: 8px;
@@ -401,7 +401,7 @@
   &&-card > &-bar &-nav-wrap {
     margin-bottom: 0;
   }
-  &&-card > &-bar &-tab-inner .anticon-cross {
+  &&-card > &-bar &-tab-inner .@{iconfont-css-prefix}-cross {
     margin-right: 0;
     color: #999;
     transition: all 0.3s @ease-in-out;
@@ -422,8 +422,8 @@
     padding-right: 8px;
   }
 
-  &&-card > &-bar &-tab-active .anticon-cross,
-  &&-card > &-bar &-tab:hover .anticon-cross {
+  &&-card > &-bar &-tab-active .@{iconfont-css-prefix}-cross,
+  &&-card > &-bar &-tab:hover .@{iconfont-css-prefix}-cross {
     width: 16px;
     transform: translateZ(0);
   }

components/tag/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@tag-prefix-cls: ant-tag;
+@tag-prefix-cls: ~"@{ant-prefix}-tag";
 
 .@{tag-prefix-cls} {
   display: inline-block;
@@ -37,7 +37,7 @@
     }
   }
 
-  .anticon-cross {
+  .@{iconfont-css-prefix}-cross {
     .iconfont-size-under-12px(10px);
     cursor: pointer;
     font-weight: bold;
@@ -59,8 +59,8 @@
     &,
     a,
     a:hover,
-    .anticon-cross,
-    .anticon-cross:hover {
+    .@{iconfont-css-prefix}-cross,
+    .@{iconfont-css-prefix}-cross:hover {
       color: #fff;
     }
   }

components/time-picker/style/index.less

@@ -2,7 +2,7 @@
 @import "../../style/mixins/index";
 @import "../../input/style/mixin";
 
-@timepicker-prefix-cls: ant-time-picker;
+@timepicker-prefix-cls: ~"@{ant-prefix}-time-picker";
 
 .@{timepicker-prefix-cls}-panel {
   max-width: 168px;

components/timeline/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@timeline-prefix-cls: ant-timeline;
+@timeline-prefix-cls: ~"@{ant-prefix}-timeline";
 @timeline-color: @border-color-split;
 
 .@{timeline-prefix-cls} {

components/tooltip/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@tooltip-prefix-cls: ant-tooltip;
+@tooltip-prefix-cls: ~"@{ant-prefix}-tooltip";
 //** Tooltip max width
 @tooltip-max-width: 250px;
 //** Tooltip text color

components/transfer/list.tsx

@@ -216,15 +216,16 @@ export default class TransferList extends React.Component<TransferListProps, any
     }
 
     const checkStatus = this.getCheckStatus(filteredDataSource);
+    const outerPrefixCls = prefixCls.replace('-list', '');
 
     return (
       <div className={listCls} style={style}>
         <div className={`${prefixCls}-header`}>
           {this.renderCheckbox({
-            prefixCls: 'ant-transfer',
+            prefixCls: outerPrefixCls,
             checked: checkStatus === 'all',
             checkPart: checkStatus === 'part',
-            checkable: <span className={'ant-transfer-checkbox-inner'}></span>,
+            checkable: <span className={`${outerPrefixCls}-checkbox-inner`}></span>,
             filteredDataSource,
             disabled: false,
           })}

components/transfer/search.tsx

 import * as React from 'react';
 import Icon from '../icon';
+import Input from '../input';
+
 function noop() {
 }
 
@@ -31,7 +33,7 @@ export default class Search extends React.Component<SearchProps, any> {
     const { placeholder, value, prefixCls } = this.props;
     return (
       <div>
-        <input placeholder={placeholder} className={`${prefixCls} ant-input`} value={value} ref="input"
+        <Input placeholder={placeholder} className={prefixCls} value={value} ref="input"
           onChange={this.handleChange}
         />
         {value && value.length > 0 ?

components/transfer/style/index.less

@@ -2,8 +2,8 @@
 @import "../../style/mixins/index";
 @import "../../checkbox/style/mixin";
 
-@transfer-prefix-cls: ant-transfer;
-.antCheckboxFn(@checkbox-prefix-cls: ant-transfer-checkbox);
+@transfer-prefix-cls: ~"@{ant-prefix}-transfer";
+.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-transfer-checkbox");
 
 .@{transfer-prefix-cls} {
   position: relative;
@@ -35,7 +35,7 @@
         line-height: 32px;
         text-align: center;
         font-size: 14px;
-        .anticon {
+        .@{iconfont-css-prefix} {
           transition: all .3s;
           font-size: 12px;
           color: #ccc;
@@ -126,7 +126,7 @@
     margin: 0 8px;
     vertical-align: middle;
 
-    .ant-btn {
+    .@{ant-prefix}-btn {
       float: left;
       clear: both;
 
@@ -134,7 +134,7 @@
         margin-bottom: 4px;
       }
 
-      .anticon {
+      .@{iconfont-css-prefix} {
         .iconfont-size-under-12px(8px);
       }
     }

components/tree-select/style/index.less

@@ -3,9 +3,9 @@
 @import "../../tree/style/mixin";
 @import "../../checkbox/style/mixin";
 
-@select-tree-prefix-cls: ant-select-tree;
+@select-tree-prefix-cls: ~"@{ant-prefix}-select-tree";
 
-.antCheckboxFn(@checkbox-prefix-cls: ant-select-tree-checkbox);
+.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-select-tree-checkbox");
 
 .@{select-tree-prefix-cls} {
   margin: 0;
@@ -115,14 +115,14 @@
   }
 }
 
-.@{select-tree-prefix-cls}-dropdown .ant-select-dropdown-search + span {
+.@{select-tree-prefix-cls}-dropdown .@{ant-prefix}-select-dropdown-search + span {
   padding: 7px 15px;
   color: #ccc;
   cursor: not-allowed;
   display: block;
 }
 
-.ant-select-not-found {
+.@{ant-prefix}-select-not-found {
   cursor: not-allowed;
   color: #ccc;
   padding: 7px 15px;

components/tree/style/index.less

@@ -3,8 +3,8 @@
 @import "../../checkbox/style/mixin";
 @import "./mixin";
 
-@tree-prefix-cls: ant-tree;
-.antCheckboxFn(@checkbox-prefix-cls: ant-tree-checkbox);
+@tree-prefix-cls: ~"@{ant-prefix}-tree";
+.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-tree-checkbox");
 
 .@{tree-prefix-cls} {
   margin: 0;

components/upload/index.tsx

@@ -3,7 +3,6 @@ import RcUpload from 'rc-upload';
 import UploadList from './uploadList';
 import getFileItem from './getFileItem';
 import classNames from 'classnames';
-const prefixCls = 'ant-upload';
 import assign from 'object-assign';
 import { UploadProps } from './interface';
 
@@ -65,7 +64,7 @@ export default class Upload extends React.Component<UploadProps, any> {
   static Dragger = Dragger;
 
   static defaultProps = {
-    prefixCls: 'ant-upload-btn',
+    prefixCls: 'ant-upload',
     type: 'select',
     // do not set
     // name: '',
@@ -249,6 +248,7 @@ export default class Upload extends React.Component<UploadProps, any> {
   }
 
   render() {
+    const { prefixCls } = this.props;
     let type = this.props.type || 'select';
     let props = assign({}, this.props, {
       onStart: this.onStart,

components/upload/interface.tsx

@@ -44,6 +44,7 @@ export interface UploadProps {
   supportServerRender?: boolean;
   style?: React.CSSProperties;
   disabled?: boolean;
+  prefixCls?: string;
 }
 
 export interface UploadListProps {
@@ -52,4 +53,5 @@ export interface UploadListProps {
   onRemove?: (file: File) => void;
   items?: Array<File>;
   progressAttr?: Object;
+  prefixCls?: string;
 }

components/upload/style/index.less

 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@upload-prefix-cls: ant-upload;
-@upload-item: ant-upload-list-item;
+@upload-prefix-cls: ~"@{ant-prefix}-upload";
+@upload-item: ~"@{ant-prefix}-upload-list-item";
 @upload-pictrue-card-size: 96px;
 
 .@{upload-prefix-cls} {
@@ -75,7 +75,7 @@
     }
 
     p.@{upload-prefix-cls}-drag-icon {
-      .anticon {
+      .@{iconfont-css-prefix} {
         font-size: 80px;
         margin-top: -5px;
         color: tint(@primary-color, 20%);
@@ -90,7 +90,7 @@
       font-size: 12px;
       color: #999;
     }
-    .anticon-plus {
+    .@{iconfont-css-prefix}-plus {
       font-size: 30px;
       transition: all 0.3s ease;
       color: #ccc;
@@ -98,7 +98,7 @@
         color: #999;
       }
     }
-    &:hover .anticon-plus {
+    &:hover .@{iconfont-css-prefix}-plus {
       color: #999;
     }
   }
@@ -117,12 +117,12 @@
       padding: 0 4px;
       transition: background-color 0.3s ease;
 
-      .anticon-paper-clip {
+      .@{iconfont-css-prefix}-paper-clip {
         margin-right: 4px;
         font-size: 12px;
         color: #999;
       }
-      .anticon-cross {
+      .@{iconfont-css-prefix}-cross {
         .iconfont-size-under-12px(10px);
         transition: all 0.3s ease;
         opacity: 0;
@@ -140,16 +140,16 @@
       background-color: tint(@primary-color, 90%);
     }
 
-    &:hover .anticon-cross {
+    &:hover .@{iconfont-css-prefix}-cross {
       opacity: 1;
     }
 
     &-error,
-    &-error .anticon-paper-clip {
+    &-error .@{iconfont-css-prefix}-paper-clip {
       color: @error-color;
     }
 
-    &-error .anticon-cross {
+    &-error .@{iconfont-css-prefix}-cross {
       opacity: 1;
     }
 
@@ -158,7 +158,7 @@
       margin-top: -2px;
       margin-bottom: 1px;
       font-size: 12px;
-      .ant-progress-line-inner {
+      .@{ant-prefix}-progress-line-inner {
         vertical-align: middle;
       }
     }
@@ -203,7 +203,7 @@
       display: block;
     }
 
-    .@{upload-item}-thumbnail.anticon:before {
+    .@{upload-item}-thumbnail.@{iconfont-css-prefix}:before {
       line-height: 48px;
       font-size: 24px;
       color: #999;
@@ -232,7 +232,7 @@
       margin-top: 0;
     }
 
-    .anticon-cross {
+    .@{iconfont-css-prefix}-cross {
       position: absolute;
       right: 8px;
       top: 8px;
@@ -265,8 +265,8 @@
         height: 100%;
       }
 
-      .anticon-eye-o,
-      .anticon-delete {
+      .@{iconfont-css-prefix}-eye-o,
+      .@{iconfont-css-prefix}-delete {
         position: absolute;
         left: 50%;
         top: 50%;
@@ -286,7 +286,7 @@
         }
       }
 
-      .anticon-delete {
+      .@{iconfont-css-prefix}-delete {
         left: 50%;
         margin-left: 6px;
       }
@@ -296,8 +296,8 @@
           opacity: .8;
         }
 
-        .anticon-eye-o,
-        .anticon-delete {
+        .@{iconfont-css-prefix}-eye-o,
+        .@{iconfont-css-prefix}-delete {
           opacity: 1;
         }
       }
@@ -323,8 +323,8 @@
       .@{upload-item}-info {
         height: auto;
         &:before,
-        .anticon-eye-o,
-        .anticon-delete {
+        .@{iconfont-css-prefix}-eye-o,
+        .@{iconfont-css-prefix}-delete {
           display: none;
         }
       }

components/upload/uploadList.tsx

 import * as React from 'react';
 import Animate from 'rc-animate';
 import Icon from '../icon';
-const prefixCls = 'ant-upload';
 import Progress from '../progress';
 import classNames from 'classnames';
 import { UploadListProps } from './interface';
@@ -21,6 +20,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
       strokeWidth: 3,
       showInfo: false,
     },
+    prefixCls: 'ant-upload',
   };
 
   handleClose = (file) => {
@@ -59,6 +59,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
   }
 
   render() {
+    const { prefixCls } = this.props;
     let list = this.props.items.map(file => {
       let progress;
       let icon = <Icon type="paper-clip" />;