英文:
Random generated color code not accepting in TailwindCSS in React.Js
问题
以下是您的消息组件的代码部分的翻译：
import randomColor from "random-color";
import React from "react";
import "../Chat.css";
function Messages({username , msg}) {
const changeTextColor = randomColor(0.99, 0.99).hexString();
console.log(changeTextColor);
return (
<div className="flex-1 px-5 py-2 chatting_body ">
<div className="flex flex-col px-4 py-2 bg-slate-600 border rounded-md max-w-fit ">
<div className={`text-sm font-bold text-[${changeTextColor}] `}>{username}</div>
<div className="flex justify-between items-end space-x-3 ">
<p className="text-white text-lg ">{msg}</p>
<p className="text-gray-400 text-xs " >{new Date().toLocaleTimeString()}</p>
</div>
</div>
</div>
);
}
export default Messages;
请注意，我只对代码部分进行了翻译，而不包括代码中的注释或其他文本。
英文:
Here is my Messages component :
import randomColor from "random-color";
import React from "react";
import "../Chat.css";
function Messages({username , msg}) {
const changeTextColor = randomColor(0.99, 0.99).hexString();
console.log(changeTextColor);
return (
<div className="flex-1 px-5 py-2 chatting_body ">
<div className="flex flex-col px-4 py-2 bg-slate-600 border rounded-md max-w-fit ">
<div className={`text-sm font-bold text-[${changeTextColor}] `}>{username}</div>
<div className="flex justify-between items-end space-x-3 ">
<p className="text-white text-lg ">{msg}</p>
<p className="text-gray-400 text-xs " >{new Date().toLocaleTimeString()}</p>
</div>
</div>
</div>
);
}
export default Messages;
By just console.log(changeTextColor); I'm getting the Hexcode, but tailwind can't able to fetch.
答案1
得分: 0
你无法在Tailwind中使用运行时动态值，对此我建议使用自定义属性。
<div class="flex-1 px-5 py-2 chatting_body ">
<div class="flex flex-col px-4 py-2 bg-slate-600 border rounded-md max-w-fit ">
<div class="text-sm font-bold text-[var(--changeTextColor,black)]">{username}</div>
<div class="flex justify-between items-end space-x-3 ">
<p class="text-white text-lg ">{msg}</p>
<p class="text-gray-400 text-xs ">{new Date().toLocaleTimeString()}</p>
</div>
</div>
</div>
<button type="button" class="rounded bg-blue-400 p-2 ">更改颜色</button>
英文:
You can't use runtime dynamic value in tailwind, for this I would recommend using custom properties.
<div class="flex-1 px-5 py-2 chatting_body ">
<div class="flex flex-col px-4 py-2 bg-slate-600 border rounded-md max-w-fit ">
<div class="text-sm font-bold text-[var(--changeTextColor,black)]">{username}</div>
<div class="flex justify-between items-end space-x-3 ">
<p class="text-white text-lg ">{msg}</p>
<p class="text-gray-400 text-xs ">{new Date().toLocaleTimeString()}</p>
</div>
</div>
</div>
<button type="button" class="rounded bg-blue-400 p-2">change color</button>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论