Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

组件样式重写问题 #279

Closed
1 task done
jihfgz opened this issue Jan 17, 2019 · 14 comments
Closed
1 task done

组件样式重写问题 #279

jihfgz opened this issue Jan 17, 2019 · 14 comments
Labels
Need Reproduce

Comments

@jihfgz
Copy link
Contributor

jihfgz commented Jan 17, 2019 •
edited

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

Reproduction link

Edit on CodeSandbox

Steps to reproduce

自定义组件样式时，局部组件样式不能 deepmerge 。
假如需要调整边框颜色，只需要在styles的局部组件样式中增加一行样式，现在需要完整的输入整个局部组件样式。同时不像2.x版本那样把样式import进来手动合并

What is expected?

What is actually happening?

Environment Info
antd 3.0.6
React react 16.4
System /react-native 0.57.8/ 失误 问题版本为 react-native 0.55.4
Browser - 
 补充： react-native版本引起  ，新版本0.57.8没问题

StyleSheet.create后，对象变成了id，deepmerge 就不起作用了

另外InputItem组件的style 属性同时作用于外层的View和里面的Input上应该也是个问题，看例子最后一个input
@BANG88
Copy link
Member

BANG88 commented Jan 17, 2019

现在是用了 deepmerge

@ant-design-bot
Copy link

Hello @jihfgz. Please provide a re-producible demo: https://codesandbox.io/s/9ll8k8614p?module=%2Fsrc%2FApp.js or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

@jihfgz
Copy link
Contributor Author

jihfgz commented Jan 18, 2019 •
edited

重现被误删，已恢复，deepmerge没啥问题，主要是StyleSheet.create把对象变成了数字id，deepmerge不起作用了

@BANG88
Copy link
Member

BANG88 commented Jan 18, 2019

@jihfgz 没有看到你说的问题，背景也是红色的啊？

@jihfgz
Copy link
Contributor Author

jihfgz commented Jan 18, 2019

其他样式不正常，默认的样式全丢失了。
比如左边距，比如input换行了

@BANG88
Copy link
Member

BANG88 commented Jan 18, 2019

来个PR

@jihfgz
Copy link
Contributor Author

jihfgz commented Jan 18, 2019 •
edited

这个怎么改，不是一个组件有这问题，所有组件都这样，结构上问题。
要么所有组件的样式文件去掉StyleSheet.create，等WithTheme里面合并样式后再套上StyleSheet.create
感觉这样StyleSheet.create没啥意义了，原来style文件里面的StyleSheet.create是静态的，只执行一次。WithTheme里面估计会反复运行

补充： 以上情况发生在react-native 0.55.4 这个版本

@BANG88 BANG88 added the Bug🐛 label Jan 18, 2019
@BANG88
Copy link
Member

BANG88 commented Jan 18, 2019

在本地试了也有这个问题吗？我之前就在InputItem里面测试的。

@BANG88
Copy link
Member

BANG88 commented Jan 18, 2019

或者你那边测试一下button组件能不能自定义样式。

@BANG88
Copy link
Member

BANG88 commented Jan 18, 2019

这个怎么改，不是一个组件有这问题，所有组件都这样，结构上问题。
要么所有组件的样式文件去掉StyleSheet.create，等WithTheme里面合并样式后再套上StyleSheet.create
感觉这样StyleSheet.create没啥意义了，原来style文件里面的StyleSheet.create是静态的，只执行一次。WithTheme里面估计会反复运行

这个修复也只需要在WithTheme里面处理一下就好

@BANG88
Copy link
Member

BANG88 commented Jan 18, 2019

style不应该放外层view修复了。
你说的我本地没有问题。

image

BANG88 added a commit that referenced this issue Jan 18, 2019
@BANG88
fix: input-item style #279
a6e22b8
@BANG88 BANG88 removed the Bug🐛 label Jan 19, 2019
@jihfgz
Copy link
Contributor Author

jihfgz commented Jan 22, 2019

不好意思，失误标错react-native版本。
现在已确定，这个问题在react-native老版本上才会出现。新版本正常。
可以更新下文档，直接说明最低支持react-native版本吧。感觉老版本问题比较多，还不好改。
我这几个app都升到react-native最新版本了

@BANG88
Copy link
Member

BANG88 commented Jan 23, 2019

来个PR更新下文档

@BANG88 BANG88 closed this as completed Jan 23, 2019
@suwu150
Copy link

suwu150 commented Feb 4, 2019 •
edited

image
我遇到这个问题,请问怎么解决?是版本的问题吗?

Environment:
  OS: macOS 10.14.2
  Node: 8.3.0
  Yarn: Not Found
  npm: 5.3.0
  Watchman: Not Found
  Xcode: Xcode 10.1 Build version 10B61
  Android Studio: 3.2 AI-181.5540.7.32.5014246

Packages: (wanted => installed)
  react: ^16.7.0 => 16.7.0
  react-native: 0.51.0 => 0.51.0
@ant-design/react-native": "^3.0.5",

GrigoryPtashko added a commit to GrigoryPtashko/ant-design-mobile-rn that referenced this issue Jul 23, 2019
@GrigoryPtashko
Merge remote-tracking branch 'upstream/master'
e2bfed9 
* upstream/master:
  bump
  fix DatePicker styles prop covering the context styles of WithTheme (ant-design#566)
  chore(deps-dev): bump eslint from 4.3.0 to 4.18.2
  Modal动画销毁前停止动画 (ant-design#554)
  fixes ant-design#536
  bump
  修改文档使用expo sdk32以上版本时出现的问题 (ant-design#535)
  SegmentedControl comonent selected segment  text bug in android (ant-design#520)
  bump
  refactor: toast allow fullscreen fixes ant-design#434
  bump
  feat: checkbox read color from theme fixes ant-design#416
  bump
  fix ant-design#412 and picker demo (ant-design#459)
  doc: remove qrcode
  fix: demo of picker
  bump
  use call fn to invoke scollView's scrollTo (ant-design#408) fix: ant-design#403
  bump
  fix: swipeable not work with android fixes: ant-design#380
  feat: 为Card组件的HeaderContent和HeaderExtra添加Wrap style，便于定制 fixes ant-design#395
  fix: demo of picker
  feat: add demo-data pkg
  fix: demo
  fix: link of date-picker close ant-design#379
  fix: demo of picker
  chore: add support
  chore: add ga
  bump
  fix: ant-design#344
  fix: add babel-runtime fixes ant-design#346 ant-design#309
  bump
  fix: spread SwipeAction rest props (ant-design#318)
  bump
  feat(popover): add placement prop fixes ant-design#308
  bump
  fix: popover on android
  refactor: popover fixes ant-design#285 (ant-design#298)
  update snap
  fix: input-item style ant-design#279
  bump
  fix: tabbar not updated fixes ant-design#201
  test: update snap
  fix: demo
  fix: groupTypes is not supported on Android fixes ant-design#264
  bump
  doc: changelog
  test: update snaps
  fix: make InputItem clear icon behave properly in Android  close ant-design#248
  fix: ant-design#249
  refactor: input height  fixes ant-design#249
  fix search-bar icon size (ant-design#250)
  bump
  doc: changelog of 3.0.4
  fix: remove react native require cycle warning close ant-design#236
  fixes ant-design#233
  fix SwipeAction props type defination about left and right (ant-design#230)
  Segmented control tintcolor (ant-design#211)
  修改SegmentedControl默认颜色为主题颜色
  doc: fixes ant-design#164
  fix: tabBarUnderlineStyle fixes ant-design#174
  3.0.3
  feat: tabs title support custom React.Element
  fix ListView loadmore issue with paginationAllLoadedView
  feat: tabs add renderUnderline
  add renderTab prop-type of tabs.
  site: add doc about list-view
  3.0.2
  site: toast doc
  test: update snap
  feat: add Locale definition
  fix: typescript errors
  site: provider
  typo
  fix: typo
  fix: typo
  site: docs
  site: notes
  site: 2.x
  doc: expo
  site: update notes
  feat: add dynamic theme example
  fix: Modal static property has type of any
  fix: alert's content can be a view element
  3.0.1
  remove: resolutions
  fix: scripts
  site: example
  site: notes
  doc: changelog
  chore: remove unused package
  3.0.0
  site: list-view
  fix: jest
  3.0.0-17
  site: fix examples
  fix: miss mock file
  chore: jest
  site: tab-bar
  3.0.0-16
  fix: tests
  feat: add safe area view for tab-bar
  refactor: tab-bar support custom icon close ant-design#158
  chore: code style
  fix: picker value type always string close ant-design#68
  feat: add textAreaRef close ant-design#141
  feat: ImagePicker performance enhancement close ant-design#45
  fix: type definition
  feat: add cameraPickerProps close ant-design#94
  feat: add locale
  update snap
  feat: add list-view
  fix: incorrect container width close ant-design#162
  fix: button with activeStyle
  fix: Portal imports
  feat: exports Portal
  fix: ImagePicker example
  fix: type definition
  fix: renderUnderline close ant-design#96
  3.0.0-15
  chore: ignore demos
  3.0.0-14
  feat: support item style close ant-design#54
  chore: update snap
  feat: support use12hours close ant-design#151
  fix: item style
  refactor: remove unused props
  chore: code style
  chore: add demo for picker
  fix: picker on android close ant-design#117
  refactor: picker
  fix: allow overwrite activeOpacity close ant-design#133
  feat: add renderIcon for steps close ant-design#136
  fix: tabs position
  fix: add disabled property close ant-design#149
  fix: locale example
  fix: modal and toast examples
  site: icon
  site: add example
  site: add icon fonts
  doc: update examples
  3.0.0-13
  fix: tabs onChange on android
  fix: notice-bar tests
  fix: search-bar tests
  fix: button tests
  fix: tag tests
  chore: decrease duration
  fix: notice-bar icon
  feat: partial Theme
  chore: update snap
  fix: demo
  chore: export provider
  3.0.0-7
  chore: update deps
  test: update snap
  feat: exports Portal
  refactor: locale-provider
  refactor: picker ant-design#154
  refactor: date-picker ant-design#154
  refactor: tabs ant-design#154
  refactor: list modal notice-bar pagination ant-design#154
  refactor: input item ant-design#154
  chore: add privacy for camera picker
  refactor: image-picker close ant-design#42
  fix: example
  refactor: grid icon ant-design#154
  refactor: styles ant-design#154
  refactor: segmented-control ant-design#154
  refactor: slider ant-design#154
  refactor: stepper
  fix: miss
  refactor: steps ant-design#154
  refactor: tab-bar ant-design#154
  refactor: styles ant-design#154
  test: update snap
  refactor: checkbox ant-design#154
  refactor: carousel ant-design#154
  test: button
  test: update snap
  refactor: card ant-design#154
  refactor: badge ant-design#154
  refactor: activity-indicator ant-design#154
  refactor: action-sheet  ant-design#154
  refactor: accordion ant-design#154
  refactor(button): use theme context
  chore: site
  chore: include vscode configurations
  test: update snap
  3.0.0-6
  chore: update icon
  style: full screen button
  feat: add sandbox
  refactor(modal): use portal close ant-design#79
  refactor(swipe-action): use react-native-swipeout directly
  doc: support me please
  fix: initialPage not work correctly on android side close ant-design#50
  refactor: tabs
  fix: typo
  fix: optional styles prop close ant-design#30
  fix: ts type close ant-design#80
  fix: app crashes when message is empty close ant-design#99
  test: update snap
  feat: performance improvements close ant-design#128
  refactor: remove top-view instead of portal
  refactor: remove images
  fix: font size
  refactor: radio ant-design#140
  chore: clean images ant-design#140
  tests: update snap
  refactor: toast ant-design#140
  refactor: replace image with icon ant-design#140
  chore: clean
  refactor: tabs
  chore: hooks
  refactor(icon): use @ant-design/icons-react-native ant-design#140
  fix: lint
  feat: exports props wip
  fix: tests
  chore: use locale
  feat: give react hooks a try
  fix: fonts on android
  feat: add fonts
  feat: portal
  fix components docs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Need Reproduce
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@BANG88 @suwu150 @ant-design-bot @jihfgz