reactjs - React - 如何以内联样式显示 HEX 颜色而不是 RGB？

Question

我已经在 useState 中保存了 HEX 颜色。

问题是 RGB 颜色显示在生成的 HTML 中。

例如:我把相同的使用状态放在DIV中，也作为内联样式中的字体颜色。

import React, { useState } from "react";

const Module = () => {
  const [color, setColor] = useState("#bada55");

  return <div style={{ color: `${color}` }}>{color}</div>;
};

export default Module;

结果是这样的。但为什么？我只需要始终以 HEX 格式显示颜色。怎么做？

<div style="color: rgb(186, 218, 85);">#bada55</div>

感谢您的任何建议!

Answer 1

我觉得这不是react的东西，而是浏览器的行为如果你看一下spec

它说:计算值将在 rgba() 中。如果不是，它将被计算为 rgb()。

因此，这是标准行为，如果您使用十六进制，它将被计算回 rgba。

也许你可以使用颜色名称代替十六进制颜色:developer.mozilla.org/en-US/docs/Web/CSS/color_value