我试着设计文件输入按钮的样式，使其看起来像我应用程序中的所有按钮。我使用tailwind来设计样式。
下面是悬停按钮的示例：

阴影没有被隐藏或切断。但如果我尝试在文件输入中使用相同的样式-它看起来像这样：

阴影被切断。看起来隐藏了溢出，但实际上没有。
文件输入代码：

<div className="flex flex-col gap-y-2 overflow-visible">
  <label htmlFor="art_cover">Art cover</label>
  <input
    type="file"
    name="art_cover"
    id="art_cover"
    onChange={({ currentTarget }: ChangeEvent<HTMLInputElement>) => {
      currentTarget.files && formik.setFieldValue('art_cover', currentTarget.files[0]);
    }}
    className="text-gray-400 file:border-solid file:btn-style file:text-primary-light file:mr-3"
  />
</div>

Tailwind重复使用了我用于按钮的样式：

.btn-style {
  @apply rounded-full bg-transparent border-2 border-primary-accent font-bold px-4 md:px-5 py-1 md:py-1.5 cursor-pointer
  transition text-center text-sm md:text-base hover:bg-primary-accent hover:text-secondary-dark hover:shadow-accent;
}

.shadow-accent {
  @apply drop-shadow-[0_0_15px_rgba(78,255,166,0.3)];
}