Getting theming values in a a template literal calling a hook works, but is it future-proof?

[zagar]

I'm using theming with styled-components. I know I can do things like:

const StyledDiv = styled.div`
  color: ${props => props.theme.color};
`;

to pick up values from a ThemeProvider, but I need something that supports defaults when there is no wrapper. I know I could add a default right there or use defaultProps, but it doesn't scale well in my scenarios where I have many different components in many files that need to share defaults.

I've developed a version that works similar to this:

const HookDiv = styled.div`
  color: ${() => useThemeValue("color")};
`;

where useThemeValue is a hook function that makes use of useTheme to pick up the current theme.

I've got a sandbox set up at https://codesandbox.io/s/zealous-ellis-v1qkpz?file=/src/App.js that has a minimum, complete and verifiable example of such a hook and its use.

Although this all works now, I'd be curious on feedback as to how future-proof it is.

Thanks.

Chris Zagar