Warning: React does not recognize the A prop on a DOM element

[kettanaito]

When:

1. Declare the following Box:

<Box marginRight={10}>Content</Box>

2. Performing server-side rendering.

Current behavior:

There's a warning from React about unrecognized attribute on the DOM element that the Box component renders.

Warning: React does not recognize the `marginRight` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `marginright` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Expected behavior:

• Prop aliases are not set as DOM elements' attributes, but used for generating CSS only
• There is no unknown attribute error from React during SSR

Environment:

• node vesrion: 10
• npm version: 6
• atomic-layout version: 0.12.0

Related:

• How this is solved in Emotion
• Separate HTML attributes from styling props styled-components/styled-components#439

[kettanaito]

Quick update on this: the issue originates from how styled-components translates the given props to DOM attributes. Eventually, it should be fixed in SC, but for now we can add a manual clean-up that'd be similar to what emotion uses to strip out invalid DOM attributes (huge RegExp listing all possible valid attributes).

In case of Atomic Layout that'd be a RegExp listing all possible variations of propAlias + breakpoint + behavior (reversed behavior, listing all invalid DOM attributes). I've addressed that in the mentioned pull request.