Can not see fill and font colors in .xlsx file with mirosoft excel when exporting using react-data-export

Question

I'm trying to export an excel sheet from react. I'm using react-data-export library. It works perfectly, I'm able to see all my formatting cell size custom fonts and colors when I open the exported file with google sheets.

But when I open the exported .xlsx file with Microsoft excel (office online / excel mobile / MS excel android app / MS Excel software) all colors are replaced with black. I'm able to see all other formatting like fonts, bold font, cell size but just the fill and font colors are replaced with black so I see black boxes in the sheet.

MS Excel view Google Sheets view

Answer 1

I was using the color as hex RGB values, but it's clearly written in the instructions that color codes should be hex ARGB values.

More on how to write ARGB here https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

Basically if you have color code as #D3D3D3 first of all remove # and add FF at the beginning, FF is the alpha value for 100% opacity.

So the final color is FFD3D3D3 .

It should look like this

 fill: { patternType: 'solid', fgColor: { rgb: 'FFD3D3D3' } },