Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
kettanaito opened this issue Feb 10, 2020 · 1 comment · May be fixed by #302
Open

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

kettanaito opened this issue Feb 10, 2020 · 1 comment · May be fixed by #302
Assignees
@kettanaito
Labels
bug needs:tests This issue needs tests. Desperately. priority:medium scope:styles This issue relates to styling

Comments

@kettanaito
Copy link
Owner

kettanaito commented Feb 10, 2020 •
edited

When:

  1. Declare the following Box:
<Box marginRight={10}>Content</Box>
  1. 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:
@kettanaito kettanaito added bug needs:tests This issue needs tests. Desperately. scope:styles This issue relates to styling priority:medium labels Feb 10, 2020
@kettanaito kettanaito linked a pull request Feb 12, 2020 that will close this issue
Draft
6 tasks
@kettanaito kettanaito self-assigned this Feb 12, 2020
@kettanaito
Copy link
Owner Author

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.

@hsingyuc hsingyuc mentioned this issue Jul 6, 2021
Closed
@gsparrowpepin gsparrowpepin mentioned this issue Mar 16, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kettanaito kettanaito

Labels
bug needs:tests This issue needs tests. Desperately. priority:medium scope:styles This issue relates to styling
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Prevent polluting the DOM with unknown attributes kettanaito/atomic-layout
1 participant
@kettanaito