在我的子组件中看不到我的自定义主题

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff4400',    
    },
    secondary: {
      main: '#0044ff',
    },
  },
});

class App extends Component {

  render() {
    return (
       <MuiThemeProvider theme={theme}>
       <Main>
        <CssBaseline />
         ...loading
      </Main>
      </MuiThemeProvider>
    );
  }
}

export default App;

在这里,我创建了一个主题,并使用MuiThemeProvider将其发送到我的子组件。

const styles = theme => ({
  titleText: {
    color: theme.palette.primary,
  }
});



function Main(props) {
  const { classes } = props;

  return (
    <React.Fragment>
      <Typography align="center" variant="title" className={classes.titleText}> Some Text </Typography> 
    </React.Fragment>
  );
}

Main.propTypes = {
  classes: PropTypes.object.isRequired,
};


export default withStyles(styles, {withTheme:true})(Main);

我希望文本“Some text”的颜色为#ff4400,但事实并非如此,它是materialui附带的默认颜色。为什么来自主题的主颜色没有为子组件中的文本着色?