taro自定义tabbar引入taro ui的tabbar组件样式不生效
wojiaoshupian opened this issue · comments
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
补充信息
欢迎提交 Issue~
如果你提交的是 bug 报告,请务必遵循 Issue 模板的规范,尽量用简洁的语言描述你的问题,最好能提供一个稳定简单的复现。🙏🙏🙏
如果你的信息提供过于模糊或不足,或者已经其他 issue 已经存在相关内容,你的 issue 有可能会被关闭。
Good luck and happy coding~
这里写法有问题,参考 #1726 排查下,顺便贴一下样式是如何引入的?
![image](https://private-user-images.githubusercontent.com/38551450/328225827-671147b7-7e08-429d-8746-df70f3548290.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTU5NDQ4NjgsIm5iZiI6MTcxNTk0NDU2OCwicGF0aCI6Ii8zODU1MTQ1MC8zMjgyMjU4MjctNjcxMTQ3YjctN2UwOC00MjlkLTg3NDYtZGY3MGYzNTQ4MjkwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTE3VDExMTYwOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTYyMzc1N2RjMmYzYWEwYjhmNTY1YzUxMjZmMzJiYWE1ZjJiMTJhNTU2ZDI5NGJjNjBiNDM4ODg3ZTU1Mzk3MzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.U76wl8uXcw56vsOoK1FzEurIr2iOm9X367rlS2F6zuo)
刚试了 用babel插件的方式按需导入 样式是能生效的