如何更改 UploadThing 中的标题

Question

我正在使用库UploadThing。我想把这些名字改成我自己的：

这是我的代码

"use client";

import toast from "react-hot-toast";

import { UploadDropzone } from "@/lib/uploadthing";
import { ourFileRouter } from "@/app/api/uploadthing/core";

interface FileUploadProps {
  onChange: (url?: string) => void;
  endpoint: keyof typeof ourFileRouter;

};

export const FileUpload = ({
  onChange,
  endpoint,
}: FileUploadProps) => {
  return (
    <UploadDropzone
      endpoint={endpoint}
      onClientUploadComplete={(res) => {
        onChange(res?.[0].url);
      }}
      onUploadError={(error: Error) => {
        toast.error(`${error?.message}`);
      }}
    />
  )
}

我想得到这个结果。我可以通过元素代码来做到这一点：

Answer 1

由于 UploadThing 库的主题文档不直接涵盖文本调整，因此您可能需要使用自定义 CSS 和可能的 JavaScript 的组合来更改按钮标签等文本元素，这些元素未在 中的主题选项中明确涵盖https://docs.uploadthing.com/theming.

如果您想要更改的文本（例如按钮标签或工具提示）嵌入在 JavaScript 组件中并且无法通过 props 配置，则您可能需要在组件呈现后使用 JavaScript 动态更改这些文本。

import React, { useEffect, useRef } from 'react';
import toast from "react-hot-toast";
import { UploadDropzone } from "@/lib/uploadthing";
import { ourFileRouter } from "@/app/api/uploadthing/core";

interface FileUploadProps {
  onChange: (url?: string) => void;
  endpoint: keyof typeof ourFileRouter;
};

export const FileUpload = ({ onChange, endpoint }: FileUploadProps) => {
  const dropzoneRef = useRef(null);

  useEffect(() => {
    const button = dropzoneRef.current?.querySelector('button');
    if (button) {
      button.textContent = 'Custom Upload Text'; // Change the button text dynamically
    }
  }, []);

  return (
    <UploadDropzone
      ref={dropzoneRef}
      endpoint={endpoint}
      onClientUploadComplete={(res) => onChange(res?.[0].url)}
      onUploadError={(error: Error) => toast.error(`${error?.message}`)}
    />
  );
};