DatePicker component can not custom style

[Samoy]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/ant-design/ant-design-mobile-rn/blob/v3.0.0/components/date-picker/datepicker/DatePickerProps.tsx

Steps to reproduce

1. Import DatePicker component;
2. Add DatePicker component to view component tree;
3. Add itemStyle={{backgroundColor:'rgb(33,66,87)'}} to DatePicker component;
4. Add style={{backgroundColor:'rgb(33,66,87)'}} property to DatePicker component;
5. Find a bug that style property has not working.

What is expected?

The style property will be worked. White squre will be not presented.

What is actually happening?

Some white squre presented.

Environment	Info
antd	3.2.0
React/ReactNative	16.9.0/0.61.5
System	Android 10
Browser	Not for browser

[Jhh910]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/ant-design/ant-design-mobile-rn/blob/v3.0.0/components/date-picker/datepicker/DatePickerProps.tsx

Steps to reproduce

1. Import DatePicker component;
2. Add DatePicker component to view component tree;
3. Add itemStyle={{backgroundColor:'rgb(33,66,87)'}} to DatePicker component;
4. Add style={{backgroundColor:'rgb(33,66,87)'}} property to DatePicker component;
5. Find a bug that style property has not working.

What is expected?

The style property will be worked. White squre will be not presented.

What is actually happening?

Some white squre presented.

Environment Info antd 3.2.0 React/ReactNative 16.9.0/0.61.5 System Android 10 Browser Not for browser

你解决了吗 怎么自定义样式？

[1uokun]

v5.1.0以上版本先用styles覆盖，下个版本会做好支持

<Picker
  itemStyle={{ backgroundColor: 'rgb(33,66,87)', color: '#fff' }}
  // style={{ backgroundColor: 'rgb(33,66,87)' }}
+  styles={{
+    wheelWrapper: {
+        backgroundColor: 'rgb(33,66,87)',
+    },
+  }}

>

[Jhh910]

v5.1.0以上版本先用styles覆盖，下个版本会做好支持

<Picker
  itemStyle={{ backgroundColor: 'rgb(33,66,87)', color: '#fff' }}
  // style={{ backgroundColor: 'rgb(33,66,87)' }}
+  styles={{
+    wheelWrapper: {
+        backgroundColor: 'rgb(33,66,87)',
+    },
+  }}

>

这个属性好像不适用我这个bug。 因为我的父组件页面有scrollView ，是需要滚动的 然后我封装了datepicker作为子组件 调用封装的datepicker 子组件之后 点击弹出的选择器页面也是会有滚动 ， 但我希望弹窗的高度就是设备的高度 没有滚动的；同样，如果父组件页面的高度没有占满屏幕，那么点击弹出的选择器页面底部也占不满屏幕，我试了挂载但不起作用

[1uokun]

v5.1.0以上版本先用styles覆盖，下个版本会做好支持

<Picker
  itemStyle={{ backgroundColor: 'rgb(33,66,87)', color: '#fff' }}
  // style={{ backgroundColor: 'rgb(33,66,87)' }}
+  styles={{
+    wheelWrapper: {
+        backgroundColor: 'rgb(33,66,87)',
+    },
+  }}

>

这个属性好像不适用我这个bug。 因为我的父组件页面有scrollView ，是需要滚动的 然后我封装了datepicker作为子组件 调用封装的datepicker 子组件之后 点击弹出的选择器页面也是会有滚动 ， 但我希望弹窗的高度就是设备的高度 没有滚动的；同样，如果父组件页面的高度没有占满屏幕，那么点击弹出的选择器页面底部也占不满屏幕，我试了挂载但不起作用

感谢您的反馈，这个是Modal的bug，下个版本也会一起修复掉。Modal的遮罩层没有占满ScrollView的全屏导致的，如果你有思路欢迎pr

[1uokun]

也可以先用DatePickerView + 自定义Modal包裹替代方案

[Jhh910]

也可以先用DatePickerView + 自定义Modal包裹替代方案 DatePicker 组件怎么设置内容显示在顶部呢，有办法设置吗？