Question

我有一个名为app的输入组件：

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随附的默认颜色。为什么主题的原色不能为子组件中的文本着色？

Answer 1

更改

   color: theme.palette.primary,

收件人

   color: theme.palette.primary.main

在您的主要组件中

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

1 个答案: