Как прокинуть стили в компонент?

Question

[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>
  );
};

export default withStyles(styles2)(App);

тут есть компонент App и два набора стилей styles1 и styles2, как добиться того, чтобы в зависимости от прокинутой сверху пропсины подключался один или другой набор стилей?

Answer 1

[Владимир]

Погугли react styled component, должно помочь
https://styled-components.com/docs/basics

Answer 2

[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
);