Как изменить цвет текста для определенных разделов, используя пользовательскую палитру тем и не перекрывая другую тему?

Question

Эти проблемы были моими отправными точками:

Как настроить пользовательские шрифты для тегов заголовка, тела и кнопки для пользовательского интерфейса материала?
Как использовать темный цветтема для раздела экрана

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

Я раздвоил образец другого пользователя, чтобы показать мой маленький образец.Вы увидите мою вставку.