如何在样式化组件中访问Material-ui的主题

我正在将CRA与Material-ui和Styled Components类型的样式一起使用。构建CSS时，我想访问Material-ui的默认主题。

package.json的一部分：

  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "@material-ui/core": "^4.2.1",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/styles": "^4.2.1",
    "styled-components": "^4.3.2"
  }

当我尝试以下内容theme时，props它是一个空对象。

StyledApp.js：

import styled from "styled-components";
import Button from "@material-ui/core/Button";

export const StyledButtOnUsingTheme= styled(Button)`
  //Below will give "Cannot read property 'error' of undefined" 
  background-color: ${props => props.theme.palette.error.light};
`;

App.js：

import React from "react";
import "./App.css";

import { StylesProvider, ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from "@material-ui/core/styles";

import { StyledButtonUsingTheme } from "./StyledApp";

function App() {
  const defaultTheme = createMuiTheme();

  window.console.log("Default theme passing to ThemeProvider", defaultTheme);

  return (