fix: Option not pass className & style (#457)

* fix missing option style passing

* test case

Author: zombieJ

examples/single.less

@@ -0,0 +1,3 @@
+.test-option {
+  font-weight: bolder;
+}

examples/single.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import Select, { Option } from '../src';
 import '../assets/index.less';
+import './single.less';
 
 class Test extends React.Component {
   state = {
@@ -93,7 +94,12 @@ class Test extends React.Component {
             <Option value="21" disabled text="disabled">
               disabled
             </Option>
-            <Option value="31" text="yiminghe">
+            <Option
+              value="31"
+              text="yiminghe"
+              className="test-option"
+              style={{ background: 'yellow' }}
+            >
               yiminghe
             </Option>
             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (

src/OptionList.tsx

@@ -270,19 +270,31 @@ const OptionList: React.RefForwardingComponent<
             );
           }
 
-          const { disabled, value, title, children } = data as OptionData;
+          const {
+            disabled,
+            value,
+            title,
+            children,
+            style,
+            className,
+          } = data as OptionData;
 
           // Option
           const selected = values.has(value);
 
           const optionPrefixCls = `${itemPrefixCls}-option`;
-          const optionClassName = classNames(itemPrefixCls, optionPrefixCls, {
-            [`${optionPrefixCls}-grouped`]: groupOption,
-            [`${optionPrefixCls}-active`]:
-              activeIndex === itemIndex && !disabled,
-            [`${optionPrefixCls}-disabled`]: disabled,
-            [`${optionPrefixCls}-selected`]: selected,
-          });
+          const optionClassName = classNames(
+            itemPrefixCls,
+            optionPrefixCls,
+            className,
+            {
+              [`${optionPrefixCls}-grouped`]: groupOption,
+              [`${optionPrefixCls}-active`]:
+                activeIndex === itemIndex && !disabled,
+              [`${optionPrefixCls}-disabled`]: disabled,
+              [`${optionPrefixCls}-selected`]: selected,
+            },
+          );
 
           const mergedLabel = childrenAsData ? children : label;
 
@@ -308,6 +320,7 @@ const OptionList: React.RefForwardingComponent<
                   onSelectValue(value);
                 }
               }}
+              style={style}
             >
               <div className={`${optionPrefixCls}-content`}>
                 {mergedLabel || value}

tests/Select.test.tsx

@@ -1501,4 +1501,25 @@ describe('Select.Basic', () => {
       expectOpen(wrapper, false);
     });
   });
+
+  it('should pass className & style to option', () => {
+    const wrapper = mount(
+      <Select
+        options={[
+          {
+            value: 'test',
+            className: 'test-class',
+            style: { background: 'yellow' },
+          },
+        ]}
+      />,
+    );
+    toggleOpen(wrapper);
+    expect(
+      wrapper.find('.rc-select-item-option').hasClass('test-class'),
+    ).toBeTruthy();
+    expect(wrapper.find('.rc-select-item-option').props().style).toEqual({
+      background: 'yellow',
+    });
+  });
 });

tests/__snapshots__/Select.test.tsx.snap

@@ -507,7 +507,7 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
               </div>
               <div
                 aria-selected="false"
-                class="antd-item antd-item-option antd-item-option-grouped antd-item-option-active"
+                class="antd-item antd-item-option option-test antd-item-option-grouped antd-item-option-active"
               >
                 <div
                   class="antd-item-option-content"