customize upload button style

[Ali-Hussein-dev]

Hi, I need to change the button color, I am using Nextjs and couldn't figure out how to achieve that through component props. In the docs, it is all about using Uploacare with vanilla JS.

[nd0ut]

Hey @Ali-Hussein-dev, it could be achieved with CSS. Do you need some examples? How do you write your styles? styled components, css modules, anything else?

[Ali-Hussein-dev]

Hey @nd0ut, I use Tailwindcss I tried to add classes but it didn't work!

[nd0ut]

Hey @nd0ut, I use Tailwindcss I tried to add classes but it didn't work!

Yeah, Tailwind classes won't work. But you can use theirs @apply directive or theme() function to create custom css classes.

/* widget.module.css */

.wrapper :global(.uploadcare--widget__button) {
  @apply border border-gray-300 rounded;
}

import { Widget } from '@uploadcare/react-widget';
import st from './widget.module.css';

<div className={st.wrapper}>
  <Widget publickey="" />
</div>

[Ali-Hussein-dev]

Thanks for the example, I also miss sth which is replacing the label "upload" with an "upload " icon, which is not possible, but I am not sure about it, can I achieve that?

[nd0ut]

Thanks for the example, I also miss sth which is replacing the label "upload" with an "upload " icon, which is not possible, but I am not sure about it, can I achieve that?

To replace label with icon, you can use custom localizations. See https://uploadcare.com/docs/uploads/file-uploader/#localization

There is no html escaping, so you can replace text with html/svg whatever else.

In react-widget, you can pass UPLOADCARE_LOCALE_TRANSLATIONS through localeTranslations prop, i.e.

<Widget localeTranslations={yourTranslations} />

Sorry for the late response.

[martinsuhendra]

Hi @nd0ut i faced difficulties to override widget css/style such a button and copy text. I am using NextJS v13.2.4 and mui v5. i've tried some methods:

1. Using import css module
2. Using styled from mui/material/styles

But seems methods above is not responding. Do you have any example how to override widget style and localisation using NextJS & material UI?