react-vant icon indicating copy to clipboard operation
react-vant copied to clipboard

🐛 [Bug]: 按照文档,中ConfigProvider 的 修改主题颜色的方式,修改Picker 中选中选项的 字体颜色,不生效

Open tingfeima opened this issue 1 year ago • 0 comments

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>

) }

tingfeima avatar Oct 18 '24 08:10 tingfeima