Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

innerRef support for withTheme() HOC

See original GitHub issue

Version

1.4.4

Reproduction

https://www.webpackbin.com/bins/-KfSbgVyPqFmY7yJYVj0

Steps to reproduce

Style a withTheme()-wrapped component and try to use the innerRef callback to grab the wrapped component instance.

Expected Behavior

I would expect the innerRef callback to resolve to the deeply nested child.

Actual Behavior

The withTheme HOC instance is returned by innerRef() and there’s no way to get the wrapped child component.

Issue Analytics

State:
Created 7 years ago
Comments:12 (11 by maintainers)

Top GitHub Comments

1reaction

kittencommented, Apr 5, 2018

@denkristoffer That happens because your InputWithRef component (which shouldn’t be necessary in the first place 😉) tries to use the ref prop, which is a special prop and thus not accessible to you. tl;dr you can’t pass ref and expect to receive it in the component. That’s why we call it innerRef. Renaming it fixes the problem: https://codesandbox.io/s/72m8xxy121

Btw it’s not preferable to post comments on closed/stale/old issues (this issue is all of those three things 😅) It’s easier to create a new issue or ask for help on Spectrum

1reaction

kittencommented, Apr 19, 2017

This PR should fix this 😄 https://github.com/styled-components/styled-components/pull/710

@evan-scott-zocdoc @mxstbr

Top Results From Across the Web

Advanced Usage - styled-components

styled-components has full theming support by exporting a <ThemeProvider> wrapper ... Color the border and text with theme.main */ ... Ad hoc theme....

How I can access to DOM node inside of withStyle component?

I seek in the web and find some GitHub issues pages and try innerRef instead of ref but it doesn't help me. How...

Breaking changes in v5, part one: styles and themes - MUI

Support for non-ref-forwarding class components in the component prop or as ... The withTheme HOC utility has been removed from the @mui/material/styles ...

Advanced Guides - Glamorous

You can accomplish this with the innerRef prop. ... glamorous also exports a withTheme higher order component (HOC) so you can access your...

styled-components | Yarn - Package Manager

... down to descendant component children when using the styled() HOC wrapper. ... for withTheme HOC, thanks to @brunolemos (See #712); Add innerRef...