Grid包裹的子组件Button无法自适应宽度
NutUI React 包名
@nutui/nutui-react-taro
NutUI React 版本号
3.0.14
平台
h5
重现链接
https://gitee.com/sd44/taromine/blob/main/src/pages/index/index.tsx#L32-81
重现步骤
问题:
NutUI Grid下的Button子组件宽度无法自适应,造成文字多行显示,撑出box,展示不全
项目和代码
- 项目和完整代码见上方链接
- 部分代码:
<Grid columns={2} gap={4} square={false}>
<Grid.Item>
<Button
type='primary'
style={{ width: 220 }}
onClick={() => Taro.navigateTo({ url: 'pages/counters' })}
>
{' '}
Counter Redux Example
</Button>
</Grid.Item>
<Grid.Item>
<Button
type='success'
style={{ width: 'auto' }}
onClick={() => Taro.navigateTo({ url: 'pages/todoMVC' })}
>
{' '}
TodoMVC Redux Example
</Button>
</Grid.Item>
</Grid>
期望的结果是什么?
Grid 下的 Button 及其他子组件应当能够如同无grid时正常使用。
实际的结果是什么?
截图
Button 文本换行,无法全部显示,必须指定写死 width
环境信息
👽 Taro v4.1.2
(node:11475) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
Taro CLI 4.1.2 environment info: System: OS: Linux 6.12 Debian GNU/Linux 13 (trixie) 13 (trixie) Shell: 4.0.2 - /usr/bin/fish Binaries: Node: 22.13.0 - /usr/local/bin/node npm: 11.2.0 - /usr/local/bin/npm npmPackages: @tarojs/cli: 4.1.2 => 4.1.2 @tarojs/components: 4.1.2 => 4.1.2 @tarojs/helper: 4.1.2 => 4.1.2 @tarojs/plugin-framework-react: 4.1.2 => 4.1.2 @tarojs/plugin-html: 4.1.2 => 4.1.2 @tarojs/plugin-platform-alipay: 4.1.2 => 4.1.2 @tarojs/plugin-platform-h5: 4.1.2 => 4.1.2 @tarojs/plugin-platform-jd: 4.1.2 => 4.1.2 @tarojs/plugin-platform-qq: 4.1.2 => 4.1.2 @tarojs/plugin-platform-swan: 4.1.2 => 4.1.2 @tarojs/plugin-platform-tt: 4.1.2 => 4.1.2 @tarojs/plugin-platform-weapp: 4.1.2 => 4.1.2 @tarojs/react: 4.1.2 => 4.1.2 @tarojs/runtime: 4.1.2 => 4.1.2 @tarojs/shared: 4.1.2 => 4.1.2 @tarojs/taro: 4.1.2 => 4.1.2 @tarojs/vite-runner: 4.1.2 => 4.1.2 babel-preset-taro: 4.1.2 => 4.1.2 eslint-config-taro: 4.1.2 => 4.1.2 react: ^18.3.1 => 18.3.1 npmGlobalPackages: typescript: 5.8.2
其他补充信息
No response