title: Emotion theming with TypeScript: Property 'X' does not exist on type 'object'. ts(2339)
body: <p>I can't find a way to make Emotion theming work with TypeScript.</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import { ThemeProvider } from &quot;emotion-theming&quot;;
  import styled from &quot;@emotion/styled&quot;;
  
  const theme = {
    colors: {
      gray: &quot;#ccc&quot;,
    },
  };
  
  const MyComponent = styled.div((props) =&gt; ({
    color: props.theme.colors.gray,
  }));
  
  const App = () =&gt; (
    &lt;ThemeProvider theme={theme}&gt;
      &lt;MyComponent /&gt;
    &lt;/ThemeProvider&gt;
  );
  
  export default App;
  </code></pre>
  <p>The docs says: &quot;By default, props.theme has an any type annotation and works without any errors&quot;. But I have one on <code>props.theme.colors.gray</code>: <strong>Property 'colors' does not exist on type 'object'.ts(2339)</strong></p>
  <p>Am I missing something here?</p>