TabBar嵌套SearchBar样式异常

[maxid]

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

Version

2.1.8

Environment

osx 10.13, node v6.10.2

Reproduction link

https://codepen.io/maxid/pen/aYPBQG?editors=0110

Steps to reproduce

只需要将SearchBar放置在TabBar的TabBar.Item内即可重现

What is expected?

https://mobile.ant.design/kitchen-sink/components/search-bar?lang=zh-CN#search-bar-demo-0
样式不要走样

What is actually happening?

Search Icon 移位，Clear Icon 移位

---

发现Search Icon和Clear Icon的宽高无效

[ant-design-bot]

Translation of this issue:

---

TabBar nested SearchBar style exception

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

Version

2.1.8

Environment

Osx 10.13, node v6.10.2

Reproduction link

https://codepen.io/maxid/pen/aYPBQG?editors=0110

Steps to reproduce

Just place the SearchBar inside the TabBar's TabBar.Item to reproduce

What is expected?

Https://mobile.ant.design/kitchen-sink/components/search-bar?lang=en#search-bar-demo-0
Styles don't get out of style

What is actually happening?

Search Icon Shift, Clear Icon Shift, input cursor shift

---

Found that the height of the Search Icon and Clear Icon is invalid,

[warmhug]

Maybe you need to override the style yourself ?

[maxid]

@warmhug 这个是ant-design-mobile组件本身组合引起的问题（理解是一个bug），不应该由使用人员重写样式去解决吧，毕境这么多组件，可能会有很多种组合，当然目前我会自己花时间解决这个问题 ...

[biubug123]

老哥，自己调样式吧，我也是自己调的，同样的情况，还有一种可能就是同时用了antd和antd-mobile的组件重复冲突

[maxid]

@biubug123 你是怎样调的，分享下～

[Breaker-93]

@maxid 你可以这样试试，找到 ant-mobile/lib/tabs/style/index.css,注掉第二个样式选择器，
.am-tabs * { -webkit-box-sizing: border-box; box-sizing: border-box; }
或者ant-mobile/lib/tabs/style/index.less文件，注掉如下样式（大概在第26行左右）：
* { box-sizing: border-box; }

[Breaker-93]

@maxid 当然，如果你引入的是antd-mobile/dist/antd-mobile.css或.less这个合并后的文件，你就对应搜索找到 .am-tabs * { box-sizing: border-box; } ; 如果感觉这样麻烦，你还可以在引入SearchBar的地方增加优先级重定义覆盖掉antd-mobile对box-sizing的样式设定。