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.

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>
  );
}

Edit white text


If you want to set a default color for all Typography elements, but not for other Material UI elements you can try this:

const theme = createMuiTheme({
  typography: {
    allVariants: {
      color: "pink"
    },
  },
});