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

Grid包裹的子组件Button无法自适应宽度

Open sd44 opened this issue 7 months ago • 0 comments

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,展示不全

项目和代码

  1. 项目和完整代码见上方链接
  2. 部分代码:

        <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

Image

Image

环境信息

👽 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

sd44 avatar Jun 23 '25 12:06 sd44