antd-mobile 自定義picker按鈕樣式

首先定義picker按鈕樣式

const CustomChildren = props => (
    <div
      onClick={props.onClick}
      style={{ width: '90px', float: 'right'}}
    >
      <div>
        <div><p align="middle" style={{float: 'left', width: '80%'}}><strong>{props.extra}</strong></p><span style={{float: 'right'}} className="arrow-down"/></div>
      </div>
    </div>
  );

然後使用

<div>
                <Picker data={seasons} cols={1} title={"資金型別"} value={this.state.value} extra={v2label[this.state.value]}
                    // onOk={v => {console.log("onOK=>"+v);this.setState({ type: v })}}
                    onChange={v => {console.log("onOK=>"+v+" "+v2type[v]);this.handleChange(v2type[v]);this.setState({ value: v })}}
                >
                    <CustomChildren/>
                </Picker>
            </div>

效果圖