React Dropzone and upload images Part 12 Styling the react dropzone

2 min readMar 2, 2022

In this article, we are going to add style to the input box and also the button.

You will get unlimited access to all source code in the YouTube channel and free Udemy courses by joining the channel.

Style the input field

<input type="text"className="border rounded focus:ring-0 w-full text-xs p-3 my-4 "ref={captionRef} placeholder='Enter a caption'/>

We add the border to the input field, add a rounded corner, set the ring width to zero when focus, the width of the input field is 100%, the text is extra small so you can see the placeholder text is extra small. Add the padding, so placeholder text will not close to the edges of the input field. We also add the margin vertically, which leave some pace between the dropbox and the button.

Style the button

Next, we are going to style the “post” button, add the blue background color and white text color when hover over the button. The original text color is blue and the font type is semibold. The vertical padding is 2 units and the horizontal padding is 4 unit. It also has a blue border and rounded corner.

<buttonclassName='hover:bg-blue-500 hover:text-white text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded'onClick={uploadPost}>post</button>

If you liked this story, you might also like a Medium membership. It’s only $5 a month (a price of a cup of coffee!) but it will give you unlimited access to stories while supporting your favorite writers. If you sign up using this link, I’ll earn a small commission. Thanks!

Follow us: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora, Telegram

Join affiliates to earn money