NervJS / taro-ui

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

taro自定义tabbar引入taro ui的tabbar组件样式不生效 #1787

Closed wojiaoshupian closed 4 months ago

wojiaoshupian commented 5 months ago

Taro UI 版本信息

v3.3.0

问题描述

taro ui作为小程序的自定义tabbar组件 引入后样式都没有了 compiler: 'webpack5', compiler:{ prebundle:{ exclude:['taro-ui'] } }, 按照以前的issue修改配置也不行

复现步骤

自定义tabbar

复现代码

import { useState } from 'react';
import { AtTabBar } from 'taro-ui';
import Taro from '@tarojs/taro';

export default function CustomTabBar() {
    const [current, setCurrent] = useState(0);

    const handleTabClick = (value) => {
        console.log(value)
        setCurrent(value);

        // 跳转逻辑
        // Taro.switchTab(getPagePath(value));
    };

    return (
        <div>
            <AtTabBar
                fixed
                tabList={[
                    { title: '自定义图标', iconPrefixClass: 'fa', iconType: 'clock', text: 'new' },
                    { title: '拍照', iconType: 'camera' },
                    { title: '文件夹', iconType: 'folder', text: '100', max: 99 }
                ]}
                onClick={handleTabClick}
                current={current}
            />
        </div>
    );
}

报错信息

暂无

系统信息

👽 Taro v3.6.27

Taro CLI 3.6.27 environment info: System: OS: macOS 12.7.4 Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node Yarn: 1.22.22 - ~/.nvm/versions/node/v18.19.0/bin/yarn npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm npmPackages: @tarojs/cli: 3.6.27 => 3.6.27 @tarojs/components: 3.6.27 => 3.6.27 @tarojs/helper: 3.6.27 => 3.6.27 @tarojs/mini-runner: ^3.6.28 => 3.6.28 @tarojs/plugin-framework-react: 3.6.27 => 3.6.27 @tarojs/plugin-html: ^3.6.28 => 3.6.28 @tarojs/plugin-platform-alipay: 3.6.27 => 3.6.27 @tarojs/plugin-platform-h5: 3.6.27 => 3.6.27 @tarojs/plugin-platform-jd: 3.6.27 => 3.6.27 @tarojs/plugin-platform-qq: 3.6.27 => 3.6.27 @tarojs/plugin-platform-swan: 3.6.27 => 3.6.27 @tarojs/plugin-platform-tt: 3.6.27 => 3.6.27 @tarojs/plugin-platform-weapp: 3.6.27 => 3.6.27 @tarojs/react: 3.6.27 => 3.6.27 @tarojs/runtime: 3.6.27 => 3.6.27 @tarojs/shared: 3.6.27 => 3.6.27 @tarojs/taro: 3.6.27 => 3.6.27 @tarojs/taro-loader: 3.6.27 => 3.6.27 @tarojs/webpack5-runner: 3.6.27 => 3.6.27 babel-preset-taro: 3.6.27 => 3.6.27 eslint-config-taro: 3.6.27 => 3.6.27 react: ^18.0.0 => 18.3.1 taro-ui: ^3.3.0 => 3.3.0

补充信息

taro-ui-bot[bot] commented 5 months ago

欢迎提交 Issue~

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

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

Good luck and happy coding~

wojiaoshupian commented 5 months ago
image
robinv8 commented 5 months ago

image 这里写法有问题,参考 https://github.com/NervJS/taro-ui/issues/1726 排查下,顺便贴一下样式是如何引入的?

wojiaoshupian commented 5 months ago

image 这里写法有问题,参考 #1726 排查下,顺便贴一下样式是如何引入的?

image
wojiaoshupian commented 5 months ago

刚试了 用babel插件的方式按需导入 样式是能生效的