Styling the Button

[alfieqashwa]

trafficstars

How to styling the button? (e.g: when user click his user avatar, then it trigger the UploadButton)

Thanks.

[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

[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";

[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.

[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.

[Mr0Bread]

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

[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.