upload在表单中宽度撑满设置

老白干

192人浏览 · 2026-06-08 11:00:06

老白干 · 2026-06-08 11:00:06 发布

<Upload
     className="w-full [&_.ant-upload-select]:!w-full"
      fileList={fileList}
      customRequest={customRequest}
      maxCount={1}
      accept=".docx,.doc,.pptx,.ppt"
      onRemove={() => {
        setFileList([])
        onChange?.('')
      }}
      onChange={(info) => {
        setFileList(info.fileList)
        if (info.file.status === 'error') {
          message.error(`${info.file.name} 上传失败`)
        }
      }}
    >
      {fileList.length < 1 && (
        <div className="flex cursor-pointer flex-col items-center rounded-xl border border-dashed border-gray-300 p-6">
          <PlusOutlined className="text-2xl text-gray-400" />
          <div className="mt-2 text-sm text-gray-400">点击或拖拽文件上传</div>
        </div>
      )}
</Upload>

[&_.ant-upload-select]:!w-full这一句是什么意思？
这是 Tailwind CSS 的任意选择器（Arbitrary Selector）语法，让我拆解一下：
[ ] 任意选择器定界符，里面写标准 CSS 选择器
& 引用当前元素自身（类似 Sass/Less 中的 &）
_.ant-upload-select （空格）+ .ant-upload-select — 选中当前元素内部的所有 .ant-upload-select 子元素（后代选择器）
: Tailwind 的变体分隔符
! Tailwind 的 !important 前缀
w-full Tailwind 的 width: 100%