NervJS / taro-ui

一款基于 Taro 框架开发的多端 UI 组件库
https://taro-ui.taro.zone
MIT License
4.54k stars 755 forks source link

AtCalendar 日历选择组件,嵌套在多个组件内部,样式无法显示? #1332

Open bingo618 opened 3 years ago

bingo618 commented 3 years ago

问题描述 AtCalendar 日历选择组件,嵌套在多个组件内部,样式无法显示

复现步骤

 <AtFloatLayout isOpened={open} className="calendar" onClose={onClose}>
      <View className="calendar-header">
        <Text className="cancel-btn" onClick={onClose}>
          取消
        </Text>
        <Text>{title}</Text>
        <AtButton
          circle
          className="confirm-btn"
          type="primary"
          onClick={handleConfirm}
          size="small"
        >
          确定
        </AtButton>
      </View>
      <AtTabs
        current={current}
        swipeable={false}
        onClick={handleChange}
        tabList={[{ title: "选择日期" }, { title: "选择时间" }]}
      >
        <AtTabsPane className="calendar__content" current={current} index={0}>
          <AtCalendar
            currentDate={currentDate}
            validDates={validDates}
            isSwiper={false}
            isMultiSelect={false}
            onSelectDate={handleSelectDate}
            onMonthChange={handleMonthChange}
          />
        </AtTabsPane>
        <AtTabsPane className="calendar__content" current={current} index={1}>
          <PickerView
            value={pickerValue}
            style={{ width: "100%", height: "250px" }}
            indicatorStyle="height: 50px"
            onChange={handlePickerChange}
          >
            <PickerViewColumn
              style={{ lineHeight: "50px", textAlign: "center" }}
            >
              {hours.map((item) => (
                <View style={{ fontSize: "16px" }}>{affixZ(item)} 时</View>
              ))}
            </PickerViewColumn>
            <PickerViewColumn
              style={{ lineHeight: "50px", textAlign: "center" }}
            >
              {minutes.map((item) => (
                <View style={{ fontSize: "16px" }}>{affixZ(item)} 分</View>
              ))}
            </PickerViewColumn>
          </PickerView>
        </AtTabsPane>
      </AtTabs>
    </AtFloatLayout>

系统信息 Taro CLI 3.0.9 environment info: System: OS: macOS 11.1 Shell: 5.8 - /bin/zsh Binaries: Node: 12.12.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.4 - /usr/local/bin/npm npmPackages: @tarojs/components: 3.0.9 => 3.0.9 @tarojs/mini-runner: 3.0.9 => 3.0.9 @tarojs/react: 3.0.9 => 3.0.9 @tarojs/runtime: 3.0.9 => 3.0.9 @tarojs/taro: 3.0.9 => 3.0.9 @tarojs/webpack-runner: 3.0.9 => 3.0.9 babel-preset-taro: 3.0.9 => 3.0.9 eslint-config-taro: 3.0.9 => 3.0.9 react: ^16.10.0 => 16.13.1 taro-ui: ^3.0.0-alpha.10 => 3.0.0-alpha.10

taro-ui-bot[bot] commented 3 years ago

欢迎提交 Issue~

如果你提交的是 bug 报告,请务必遵循 Issue 模板的规范,尽量用简洁的语言描述你的问题,最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足,或者已经其他 issue 已经存在相关内容,你的 issue 有可能会被关闭。

Good luck and happy coding~

bingo618 commented 3 years ago

image

dora1995 commented 1 year ago

+1