Set Typography text color in Material UI

Though your approach works fine in this sandbox, it is not the approach I would recommend. Instead of nested themes, for customizations like this I would recommend using withStyles as shown below (for v4 of Material UI — v5 example further down).

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";

const WhiteTextTypography = withStyles({
  root: {
    color: "#FFFFFF"
  }
})(Typography);

export default function App() {
  return (
    <div className="App" style={{ backgroundColor: "black" }}>
      <WhiteTextTypography variant="h3">
        This text should be white
      </WhiteTextTypography>
    </div>
  );
}

In v5, Material UI has enhanced the color prop significantly (for all components that have a color prop) to support any color in the theme’s palette, so for white you can use common.white:

import React from "react";
import Typography from "@mui/material/Typography";

export default function App() {
  return (
    <div className="App" style={{ backgroundColor: "black" }}>
      <Typography variant="h3" color="common.white">
        This text should be white
      </Typography>
    </div>
  );
}

Related answer: Can you add an additional color in Material UI?