maksipes
@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, как добиться того, чтобы в зависимости от прокинутой сверху пропсины подключался один или другой набор стилей?
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ответы на вопрос 2
maksipes
@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
);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы