Styling the Button about uploadthing

[markflorkowski]

Right now, we don't support styling the button, it is on my list of planned features though.

In the mean time, you would need to create your own button and hook it up using the useUploadThing() hook

[embersee]

The quick workaround for this is to change the order of imports. Making sure that the uploadthing component styles are imported before others usually does the trick

import "@uploadthing/react/styles.css";
import "../styles/globals.css";

This workaround works in dev, but after building and/or publishing to Vercel there are still conflicts.

[Mr0Bread]

@markflorkowski custom styling had been implemented and released. I guess this issue can be closed

[kitze]

@markflorkowski how can one use the useUploadThing hook? the package doesn't export it

[markflorkowski]

@kitze Sorry, just seeing this now. You can use the generateReactHelpers() function to get it.

[VincentAudette]

I didn't import the styles and provided new styles as overrides in my css file.

.ut-hidden {
  @apply hidden;
}
.ut-bg-blue-600 {
  @apply flex h-10 w-36 cursor-pointer items-center justify-center rounded-md bg-blue-600 hover:bg-blue-500;
}

.ut-text-white {
  @apply text-white;
}

.ut-text-xs {
  @apply text-center text-xs leading-5 text-gray-600;
}

Could be way better but quick fix for the moment.

[timtbdev]

There's a CSS style conflict for reset and submit button's with shadcn UI forms. Upload thing's styling overrides shadcn UI's form's default button styles.

[markflorkowski]

The quick workaround for this is to change the order of imports. Making sure that the uploadthing component styles are imported before others usually does the trick

import "@uploadthing/react/styles.css";
import "../styles/globals.css";

[HyperGrapher]

Also another very simple thing i would expect is to be able to change the button name. I had to change it with element.innerText. no time to open a feature request but this should be a default option anyways.

[markflorkowski]

As of @uploadthing/[email protected] custom styling of the components is now supported. Please see the docs for more info on how to use the new styling options.