react-native使用antd-mobile-RN请参考这篇:https://mp.csdn.net/console/editor/html/105571446
如果antd或者antd-mobile官方提供api,可以修改样式,则首选通过api直接修改
如果官方不提供api的话,可以通过className
的方式(2种写法)来修改样式
<InputItem
key="input1"
className={`${style['input-item']}`}
style={{backgroundColor: '#333' }}
>
</InputItem>
或者className的另一种写法:
<InputItem
className={styles.none_padding}
{...getFieldProps('money3')}
defaultValue={''}
placeholder="请输入您的手机号"
type={this.state.type}
clear
moneyKeyboardAlign="left"
moneyKeyboardWrapProps={moneyKeyboardWrapProps}
>
<span className={styles.input_font}>手机号</span>
</InputItem>
还有一种情况就是global全局选择器:
这个时候又分两种情况,对于项目的局部还是全局生效?
如果是,直接加global限定,由于antd是异步加载,所以一般找一个比较大的父级(比如所有元素都在body中),书写方式如下:
body :global(.am-list-item .am-input-control input) {
height: 55px;
}
正常来说都是局部的,如果只需要作用于你的小区域,那么就加一个外部距离较近的css来做限定:比如外部有个div类名叫flex_container
body .flex_container :global(.am-list-item .am-input-control input) {
color: #c2c2c2;
font-size: 15px;
line-height: 21px;
}
这样就实现了局部样式的控制了。
PS:global后面不要加空格