![](/img/trans.png)
[英]How to make different variants of component based on props using styled MUI?
[英]How to make a styled circle component using tailwindcss?
我正在我的 React 應用程序中處理圖像上傳組件,並且我設計了圖像上傳器組件。
這里分別是代碼和結果。
<div className="px-8 py-6 mt-2 text-left bg-white shadow-lg">
<form action="">
<div class="flex items-center justify-center bg-grey-lighter">
<label class=" flex flex-col items-center px-4 py-6 bg-white text-blue rounded-lg shadow-lg tracking-wide uppercase border border-blue cursor-pointer hover:bg-blue hover:text-white">
<AddAPhotoIcon />
<span class="mt-2 text-base leading-normal">Upload Photo</span>
<input type="file" class="hidden" />
</label>
</div>
</form>
</div>
但我想完全按照以下組件更改它。
確保你想要圓形的元素具有相同的寬度和高度,並結合rounded-full
。
我改編了您的示例並使用h-40
和w-40
來控制高度和寬度。 使用rounded-full
,結果是一個圓形組件。
<div class="flex items-center justify-center">
<form action="">
<label class="text-blue border-blue hover:bg-blue flex h-40 w-40 cursor-pointer flex-col items-center justify-center rounded-full border bg-white uppercase tracking-wide shadow-lg hover:text-white">
<AddAPhotoIcon />
<span class="mt-2 text-base leading-normal">Upload Photo</span>
<input type="file" class="hidden" />
</label>
</form>
</div>
這是你要的嗎??
<script src="https://cdn.tailwindcss.com"></script> <div class="p-10 w-72 border-4 border-gray-200 rounded-full"> <div class="bg-gray-300 p-20 w-52 rounded-full text-center"> Upload <br/>Photo </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.