maksipes

В общем, поковырялся я и сделал так, вдруг кому будет полезно:

import React from "react";
import { withStyles } from "@material-ui/core/styles";

const styles1 = {
  style: {
    color: "red"
  }
};

const styles2 = {
  style: {
    color: "blue"
  }
};

const App = props => {
  const { classes } = props;
  return (
    <div className={classes.style}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
};

const AppWithStyle = props => {
  const { alterStyle } = props;

  const Component = withStyles(alterStyle ? styles2 : styles1)(App);
  return <Component {...props} />;
};

export default AppWithStyle;

Естественно наверху вызываем этот компонент с пропсиной, если нужно другие стили применить, или без нее, если нужны дефолтные стили.

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <AppWithStyle alterStyle />
  </React.StrictMode>,
  rootElement
);

Если написать sayHello обычной функцией - свойств не будет найдено, ибо у этой функции будет свой this, отличный от функции лежащей выше - у каждой из них есть свой this.

У стрелочных функций своего this нет, следовательно this будет искаться дальше на уровень выше. И вот тут получается, что найдется this "родительской" функции, который как раз и нужен.

Стрелочная функция всегда "видит" this объекта/функции, где была объявлена.

Так я себе представляю это. Не претендую на точность.

Если кому-то вдруг тоже самое понадобится, вот хороший пример (не мой)

{
...
  render() {
    const { dateStr } = this.state;

    return (
      <React.Fragment>
          {ReactDOM.createPortal(
            <HeaderContent dateStr={dateStr} />,
            document.getElementById("header")
          )}
          <div>This is the main content</div>
          {ReactDOM.createPortal(
            <Footer text="this is cool footer text" />,
            document.getElementById("footer")
          )}
      </React.Fragment>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("main"));