Can't pass variables to styled-jsx with typescript

error.md

ERROR  Failed to compile with 1 errors                                                                                                                                                                                               00:21:39

 error  in ./pages/index.tsx

Syntax Error: <style jsx>{`some css`}</style>), but got BinaryExpression

  1 | import * as React from 'react';
  2 | var backgroundColor = '#eee';
> 3 | export default (function () { return (<div className='hello'>
    |                                       ^
  4 |     <p>Hello World</p>
  5 |     <style jsx>{"\n      .hello {\n        background-color: " + backgroundColor + ";\n        padding: 100px;\n        text-align: center;\n        transition: 100ms ease-in background;\n      }\n    "}</style>
  6 |   </div>); });



 @ multi ./pages/index.tsx

index.tsx

import * as React from 'react'
const backgroundColor = '#eee'

export default () => (
  <div className='hello'>
    <p>Hello World</p>
    <style jsx>{`
      .hello {
        background-color: ${backgroundColor};
        padding: 100px;
        text-align: center;
        transition: 100ms ease-in background;
      }
    `}</style>
  </div>
)

next.config.js

const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

package.json

{
  "name": "example",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "node-sass": "4.5.3",
    "react": "16.0.0",
    "react-dom": "16.0.0"
  },
  "license": "ISC",
  "devDependencies": {
    "@zeit/next-typescript": "0.0.8",
    "typescript": "2.7.1"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ]
  }
}