🐛 [Bug]: 按照文档,中ConfigProvider 的 修改主题颜色的方式,修改Picker 中选中选项的 字体颜色,不生效
Which React Vant packages are impacted?
- [ ]
react-vant(React Vant core) - [ ]
react-vant-icons(React Vant Icon)
What version of React Vant are you using?
3.3.5
Reproduce live demo(codesandebox or stackblitz)?
No response
Descripition
import React, { useState } from 'react' import isEmpty from 'lodash/isEmpty' import { ConfigProvider, Picker, Field } from 'react-vant' import { fieldNamesData } from '../utils/cityData'
export default ({ handleArea, area }) => { let defaultCity = ['北京市', '北京市', '东城区'] let preCity = null if (area) { preCity = area.split(',').filter((o) => o) defaultCity = preCity } const [value, setValue] = useState(defaultCity) return ( <ConfigProvider themeVars={{ rvPickerOptionTextColor: '#FF4901', // '--rv-picker-option-text-color': '#FF4901', // '--rv-picker-option-text-color--selected': '#FF4901', }} > <Picker confirmButtonText={ <span style={{ color: '#FF4901', fontSize: '16px', lineHeight: '20px', }} > 确定 } cancelButtonText={ <span style={{ color: '#666', fontSize: '16px', lineHeight: '20px', }} > 取消 }
itemHeight={44}
visibleItemCount={4}
popup={{
round: true,
}}
value={value}
placeholder={''}
columns={fieldNamesData}
columnsFieldNames={{
text: 'cityName',
children: 'cities',
}}
onConfirm={(v) => {
setValue(v)
handleArea(v.join(','))
}}
>
{(val, _, actions) => {
return (
<Field
isLink={true}
style={{ color: '#999' }}
readOnly
clickable
controlAlign="right"
value={isEmpty(preCity) ? preCity : val || ''}
placeholder="选择城市"
onClick={() => actions.open()}
/>
)
}}
</Picker>
</ConfigProvider>
) }