как передать тему Material UI многим «перенаправленным» компонентам - PullRequest
Новая
       7

как передать тему Material UI многим «перенаправленным» компонентам

0 голосов
/ 06 февраля 2019

Я видел несколько вариантов использования withStyles и withTheme, но я не думаю, что они применимы к ReactDOM.render.Есть ли способ сделать мою пользовательскую тему доступной из всех компонентов? 

const theme = createMuiTheme({/*... lots of theme code here */});

const app = signalRConnection => (
  <SignalRProvider connection={signalRConnection}>
    <CssBaseline />
    <MuiThemeProvider theme={theme}>
    <Router history={createBrowserHistory()}>
      <Switch>
        <Route exact path="/" component={DashboardPage} />
        <Route path="/foo/:id" component={FooPage} />
        <Route path="/test" component={TestPage} />
        <Route path="/home/chat" component={ChatApp} />
        <Route render={() => <Redirect to="/" />} />
      </Switch>
    </Router>
    </MuiThemeProvider>
  </SignalRProvider>
);

window.renderApp = function(id, signalRConnection) {
  ReactDOM.render(app(signalRConnection), document.getElementById(id));
};

Это похоже на хак, но я не уверен, что это: 

<Route
  path='/'
  component={() => <DashboardPage theme={theme} />}
/>

1 Ответ

0 голосов
/ 06 февраля 2019

MuiThemeProvider делает тему доступной для всех компонентов-потомков, поэтому вам не нужно делать ничего лишнего, чтобы сделать тему доступной (все ваши маршруты уже являются потомками MuiThemeProvider).Вы должны использовать withTheme или withStyles в компоненте (например, DashboardPage), который должен использовать тему.

Если вы хотите иметь возможность получить доступ к теме в качестве опоры в DashboardPage, тогдаDashboardPage может выглядеть примерно так: 

import React from "react";
import { withTheme } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
const DashboardPage = ({ theme }) => {
  return (
    <>
      <div>Primary color is {theme.palette.primary.main}</div>
      <Button color="primary" variant="contained">
        Show Theme in a Button
      </Button>
    </>
  );
};
const DashboardPageWithTheme = withTheme()(DashboardPage);
export default DashboardPageWithTheme;

Вот рабочий пример:

Edit ywx1nvvy6z

...