Open Ali-Hussein-dev opened 2 years ago
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?
Hey @nd0ut, I use Tailwindcss I tried to add classes but it didn't work!
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>
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?
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.
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:
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?
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.