如何使用自定义主题调板而不覆盖另一个主题来更改某些部分的文本颜色？

Question

这些问题是我的出发点：

How do I set custom fonts for header, body, and button tags for Material UI?
How to use dark theme for section of the screen

import { createMuiTheme } from "@material-ui/core/styles";
import grey from "@material-ui/core/colors/grey";


const mainTheme = createMuiTheme({
  typography: {
    h2: {
      fontFamily: "campton-light"
    },
    h3: {
      fontFamily: "campton-book"
    },
    body1: {
      fontFamily: "campton-book"
    }
  }
});

const darkTheme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

export { mainTheme, darkTheme };

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles, MuiThemeProvider } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import {mainTheme, darkTheme} from "../Theme";

const styles = theme => ({
  root: {
    flexGrow: 1
  }
});

class App extends Component {
  render() {
    const { classes } = this.props;
    return (
      <MuiThemeProvider theme={mainTheme}>
       <Typography variant="h2">Some text here as h2 "campton-light"</Typography>
        <MuiThemeProvider theme={darkTheme}>
          <Typography variant="body1">Some text here should be dark theme with the "body1" font family but shows as default "Roboto" font with type: "dark" text color.</Typography>
        </MuiThemeProvider>
      </MuiThemeProvider>
    );
  }
}

Apps.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(Apps);

这是一个工作示例：https://codesandbox.io/s/8nm56kzlj2

我分叉了另一个用户的样本，只是为了展示我的小样本。您会看到我的插入内容。