react typescript エラー解決できない

環境
react + typescript を使っています

やりたかったこと
https://qiita.com/Ouvill/items/c6761c32d31ffb11e114
上記のサイトを参考にしてmaterial Uiのコンポーネントをstyled-componentsで装飾したい。
src/materialui/theme.tsを作り上記のサイトをコピペして貼り付けました。
src/App.tsを作り、上記サイトを参考にしたのですがApp.tsで下記のエラーが出てしまいます。
わかる人がいましたらご教授お願いしたいです。

// エラー内容
[ts] インポート宣言が、'theme' のローカル宣言と競合しています。 [2440]
[ts] 代入式の左側は、変数またはプロパティ アクセスである必要があります。 [2364]
[ts] 名前 'StyledThemeProvider' が見つかりません。 [2304]
[ts] 名前 'MaterialThemeProvider' が見つかりません。 [2304]
[ts] 演算子 '<' を型 'boolean' および 'RegExp' に適用することはできません。 [2365]
[ts] 未終了の正規表現リテラルです。 [1161]

// theme.ts
import {createMuiTheme} from '@material-ui/core/styles'

const theme = createMuiTheme({
    palette: {
      primary: {
        // 緑色
        main: "#8BC34A",
        dark: "#689F38",
        light: "#DCEDC8"
      },
      secondary: {
        // オレンジ
        main: "#FF5722"
      },
      text: {
        // ちょっと薄い黒
        primary: "#212121",
        secondary: "#757575"
      }
    }
  });

export default theme;

//App.ts
import React from "react";
import {
  ThemeProvider as MaterialThemeProvider,
  StylesProvider
} from "@material-ui/styles";
import styled, {
  ThemeProvider as StyledThemeProvider
} from "styled-components";
import theme from "./materialui/theme";

const App = () => (
    <StylesProvider injectFirst>
      <MaterialThemeProvider theme={theme}>
        <StyledThemeProvider theme={theme}>
            // ここからメインのコンポーネントを記載する
            // <Main></Main> とか
        </StyledThemeProvider>
      </MaterialThemeProvider>
    </StylesProvider>
)