CODEWITHSUNDEEP
reactjs
TheDareback
TheDareback

Reputation: 407

React - How to display HEX color instead of RGB in inline style?

I have saved HEX color in useState.

The problem is that the RGB color is displayed in the resulting HTML.

For example: I put the same use state in the DIV and also as the font color in the inline style.

import React, { useState } from "react";

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

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

export default Module;

The result is like this. But why? I only need to display the color in HEX format at all times. How to do it?

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

Thanks for any advice!

Upvotes: 3

Views: 8109

Answers (1)

Ahmed Eid
Ahmed Eid

Reputation: 144

I think this is not a react thing, but a browser behavior if you took a look at the spec

it says: the computed value will be in rgba(). If it isn't, it will be computed to rgb().

so, it is standard behavior and, if you use hex it will be computed back to rgba.

maybe you can use color name instead hex-color: developer.mozilla.org/en-US/docs/Web/CSS/color_value

Upvotes: 3

Related Questions