Why Do I See Passed Props In HTML Output In A React App?

I have a simple Text component created with Styled components:

const Text = styled.p`
  color: ${({color, theme}) => color ? theme.colors[color] : 'inherit'};
`;

It works, however for some reason I can see the color prop passed in an HTML output in console.

<p color="gray700" class="sc-ifAKCX GLYnD">2 active deals</p>

Weird is that if I rename the prop from color to variant, it doesn't appear in the console:

<p class="sc-ifAKCX GLYnD">2 active deals</p>

What does this depend on?

Have been trying to figure out this for over an hour but finally I found the reason.

The color prop is being passed down to your HTML because color is an attribute of the <font> HTML tag and thus this is the expected behavior.

Therefore I would avoid using color as prop for styled-components/React to avoid passing down unnecessary HTML attributes

https://www.w3schools.com/tags/att_font_color.asp