reactjs - 从外部material-ui组件访问主题

Question

我有一个使用标准深色主题的主题提供程序。我希望能够从我自己的自定义组件访问该主题的详细信息，但我不知道如何做到这一点。在下面的示例中，this.props.theme 未定义

ReactDOM.render(
    <MuiThemeProvider theme={theme}>
        <App/>
    </MuiThemeProvider>, document.getElementById('root')
);

class App extends Component {
    render() {
        const {classes} = this.props;
        return (
            <div className="App">
                <MainMenu/>
                <div className={classes.root}>
                    <Grid container spacing={8}>
                        <Grid item xs>
                            <Chart theme={this.props.theme}/>
                        </Grid>
                    </Grid>
                </div>
            </div>
        );
    }
}

Answer 1

您还可以使用 useTheme Hook !

import { useTheme } from '@material-ui/styles';

function DeepChild() {
  const theme = useTheme();
  return <span>{`spacing ${theme.spacing}`}</span>;
}

https://material-ui.com/styles/advanced/#accessing-the-theme-in-a-component