在React.Js中，随机生成的颜色代码无法在TailwindCSS中接受。

huangapple
go评论170阅读模式
英文:

Random generated color code not accepting in TailwindCSS in React.Js

问题

以下是您的消息组件的代码部分的翻译：

  1. import randomColor from "random-color";
  2. import React from "react";
  3. import "../Chat.css";
  5. function Messages({username , msg}) {
  6.   const changeTextColor = randomColor(0.99, 0.99).hexString();
  7.   console.log(changeTextColor);
  8.   return (
  9.     <div className="flex-1 px-5 py-2 chatting_body ">
  10.       <div className="flex flex-col px-4 py-2 bg-slate-600 border rounded-md max-w-fit ">
  11.         <div className={`text-sm font-bold text-[${changeTextColor}] `}>{username}</div>
  12.         <div className="flex justify-between items-end space-x-3 ">
  13.           <p className="text-white text-lg ">{msg}</p>
  14.           <p className="text-gray-400 text-xs " >{new Date().toLocaleTimeString()}</p>
  15.         </div>
  16.       </div>
  17.     </div>
  18.   );
  19. }
  21. export default Messages;

请注意，我只对代码部分进行了翻译，而不包括代码中的注释或其他文本。

英文:

Here is my Messages component :

  1. import randomColor from &quot;random-color&quot;;
  2. import React from &quot;react&quot;;
  3. import &quot;../Chat.css&quot;;
  5. function Messages({username , msg}) {
  6.   const changeTextColor = randomColor(0.99, 0.99).hexString();
  7.   console.log(changeTextColor);
  8.   return (
  9.     &lt;div className=&quot;flex-1 px-5 py-2 chatting_body  &quot;&gt;
  10.       &lt;div className=&quot;flex flex-col px-4 py-2 bg-slate-600 border rounded-md max-w-fit &quot;&gt;
  11.         &lt;div className={`text-sm font-bold text-[${changeTextColor}] `}&gt;{username}&lt;/div&gt;
  12.         &lt;div className=&quot;flex justify-between items-end space-x-3 &quot;&gt;
  13.           &lt;p className=&quot;text-white text-lg &quot;&gt;{msg}&lt;/p&gt;
  14.           &lt;p className=&quot;text-gray-400 text-xs &quot; &gt;{new Date().toLocaleTimeString()}&lt;/p&gt;
  15.         &lt;/div&gt;
  16.       &lt;/div&gt;
  17.     &lt;/div&gt;
  18.   );
  19. }
  21. export default Messages;

By just console.log(changeTextColor); I'm getting the Hexcode, but tailwind can't able to fetch.

答案1

得分: 0

你无法在Tailwind中使用运行时动态值，对此我建议使用自定义属性。

这是一个示例。

  1. <div class="flex-1 px-5 py-2 chatting_body ">
  2.   <div class="flex flex-col px-4 py-2 bg-slate-600 border rounded-md max-w-fit ">
  3.     <div class="text-sm font-bold text-[var(--changeTextColor,black)]">{username}</div>
  4.     <div class="flex justify-between items-end space-x-3 ">
  5.       <p class="text-white text-lg ">{msg}</p>
  6.       <p class="text-gray-400 text-xs ">{new Date().toLocaleTimeString()}</p>
  7.     </div>
  8.   </div>
  9. </div>
  10. <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.

Here is an example.

  1. &lt;div class=&quot;flex-1 px-5 py-2 chatting_body  &quot;&gt;
  2.   &lt;div class=&quot;flex flex-col px-4 py-2 bg-slate-600 border rounded-md max-w-fit &quot;&gt;
  3.     &lt;div class=&quot;text-sm font-bold text-[var(--changeTextColor,black)]&quot;&gt;{username}&lt;/div&gt;
  4.     &lt;div class=&quot;flex justify-between items-end space-x-3 &quot;&gt;
  5.       &lt;p class=&quot;text-white text-lg &quot;&gt;{msg}&lt;/p&gt;
  6.       &lt;p class=&quot;text-gray-400 text-xs &quot;&gt;{new Date().toLocaleTimeString()}&lt;/p&gt;
  7.     &lt;/div&gt;
  8.   &lt;/div&gt;
  9. &lt;/div&gt;
  10. &lt;button type=&quot;button&quot; class=&quot;rounded bg-blue-400 p-2&quot;&gt;change color&lt;/button&gt;

huangapple
  • 本文由 发表于 2023年3月12日 17:39:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/75712246.html
  • css
  • npm
  • reactjs
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定