Reakit: Warning: React does not recognize the `textOnly` prop on a DOM element

[Slapbox]

🐛 Bug report

Current behavior

Passing a prop to a styled(Box) for dynamic styling can result in this warning, but does not cause any warning for styled.div.

Steps to reproduce the bug

https://codesandbox.io/s/reakit-f8mhg?fontsize=14

Expected behavior

Don't pass invalid props to the DOM.

Possible solutions

This mention of using shouldForwardProp over emotion-js seems to be the approach to fixing these "warnings" (that appear as errors): https://github.com/emotion-js/emotion/issues/183#issuecomment-432616898

Environment

$ npx envinfo --system --binaries --npmPackages

  System:
    OS: Windows 7
    CPU: (2) x64 Intel(R) Core(TM) i5-4690K CPU @ 3.50GHz
    Memory: 5.39 GB / 13.75 GB
  Binaries:
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.2.0 - C:\Users\Remie\AppData\Roaming\npm\npm.CMD

[open-collective-bot[bot]]

Hey @Slapbox :wave:,

Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.

If you use Reakit at work, you can also ask your company to sponsor us :heart:.

[diegohaz]

Reakit used to filter out non-DOM props in the past, but that's not a good solution. Other than the impact on the bundle size, it has also poor performance as you have to compare the props against a huge list of valid props on every render.

That's why Reakit doesn't care about this anymore.

It works with styled.div because styled-components automatically filters invalid HTML props out for native elements. It can't do the same with components as those props may be expected by the components.

One solution is to filter them out manually:

const MyBox = styled(({ someProp, ...props }) => <Box {...props} />)`
  background-color: ${({ someProp }) => (someProp ? "red" : "green")};
`;

It's not pretty, but you can create helpers or use lodash to do that.

[Slapbox]

@diegohaz - fair enough. I can definitely see the performance argument.

In a related question, I'm not really clear on what benefits are offered by using styled(Box) vs styled.div, if any. I know Box has benefits in a standalone usage like <Box />, but are there benefits when combining with styled?

I've been using Boxes everywhere to try to be consistent, and because they make for cleaner JSX. Maybe I overlooked a part of the docs that addresses this question? I'm wondering if perhaps I should simply use styled.div unless I have a good reason?

[diegohaz]

@Slapbox The only advantage I can think of is that it'll support render props.

const StyledBox = styled(Box)``;
<StyledBox>
  {props => <button {...props} />}
</StyledBox>

If it's worth it or not, it depends on what you're doing on your app.