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