Adds support for custom styles in Transfer and Transfer operation.

components/transfer/index.en-US.md

@@ -22,7 +22,9 @@ One or more elements can be selected from either column, one click on the proper
 | filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean |  |
 | footer | A function used for rendering the footer. | (props): ReactNode |  |
 | lazy | property of [react-lazy-load](https://github.com/loktar00/react-lazy-load) for lazy rendering items. Turn off it by set to `false`. | object\|boolean | `{ height: 32, offset: 32 }` |
+| style | A custom CSS style used for rendering wrapper element. | object |  |
 | listStyle | A custom CSS style used for rendering the transfer columns. | object |  |
+| operationStyle | A custom CSS style used for rendering the operations column. | object |  |
 | notFoundContent | Text to display when a column is empty. | string\|ReactNode | 'The list is empty' |
 | operations | A set of operations that are sorted from bottom to top. | string\[] | ['>', '<'] |
 | render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a React element and `value` is for title | Function(record) |  |

components/transfer/index.tsx

@@ -34,6 +34,7 @@ export interface TransferProps {
   onSelectChange?: (sourceSelectedKeys: string[], targetSelectedKeys: string[]) => void;
   style?: React.CSSProperties;
   listStyle?: React.CSSProperties;
+  operationStyle?: React.CSSProperties;
   titles?: string[];
   operations?: string[];
   showSearch?: boolean;
@@ -75,7 +76,9 @@ export default class Transfer extends React.Component<TransferProps, any> {
     targetKeys: PropTypes.array,
     onChange: PropTypes.func,
     height: PropTypes.number,
+    style: PropTypes.object,
     listStyle: PropTypes.object,
+    operationStyle: PropTypes.object,
     className: PropTypes.string,
     titles: PropTypes.array,
     operations: PropTypes.array,
@@ -328,7 +331,9 @@ export default class Transfer extends React.Component<TransferProps, any> {
       searchPlaceholder,
       body,
       footer,
+      style,
       listStyle,
+      operationStyle,
       filterOption,
       render,
       lazy,
@@ -343,7 +348,7 @@ export default class Transfer extends React.Component<TransferProps, any> {
 
     const titles = this.getTitles(locale);
     return (
-      <div className={cls}>
+      <div className={cls} style={style}>
         <List
           prefixCls={`${prefixCls}-list`}
           titleText={titles[0]}
@@ -375,6 +380,7 @@ export default class Transfer extends React.Component<TransferProps, any> {
           leftActive={leftActive}
           leftArrowText={operations[1]}
           moveToLeft={this.moveToLeft}
+          style={operationStyle}
         />
         <List
           prefixCls={`${prefixCls}-list`}

components/transfer/operation.tsx

@@ -21,9 +21,10 @@ export default class Operation extends React.Component<TransferOperationProps, a
       leftActive,
       rightActive,
       className,
+      style,
     } = this.props;
     return (
-      <div className={className}>
+      <div className={className} style={style}>
         <Button
           type="primary"
           size="small"