React-如何在内联样式中显示HEX颜色而不是RGB

Question

我已将HEX颜色保存在useState中。

问题是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

我认为这不是反应，而是浏览器行为如果你看一下的规格

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

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

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