Как разрешить настройку стиля компонента React через реквизит, когда используется withStyles api? - PullRequest
Новая
       8

Как разрешить настройку стиля компонента React через реквизит, когда используется withStyles api?

1 голос
/ 06 ноября 2019

Я пишу какой-то простой повторно используемый компонент для нашего приложения React (с MaterialUI).

Проблема в том, что я хочу разрешить различные стили этого одного и того же компонента многократного использования , настраивать его через реквизиты, с помощью потребляющего компонента.

Это некоторые изкод: 

import { withStyles } from '@material-ui/core';

const styles = theme => ({
image: {
    maxHeight: '200px'
}
});

render() {
        const classes = this.props.classes
        return (
            <div>
                 ...
                 <img className={classes.image} src={this.state.filePreviewSrc} alt="" />
                 ...
            </div>
        );
    }

Допустим, я хочу позволить программисту настроить внешний вид classes.image. Можно ли каким-либо образом перезаписать класс жестко запрограммированных изображений?

Является ли использование withStyles api даже правильным подходом для создания компонентов , внешний вид которых может настраиваться потребляющим компонентом / программистом?

1 Ответ

1 голос
/ 06 ноября 2019

Существует три основных подхода к поддержке настройки стилей:

  1. Использование реквизита в ваших стилях
  2. Использование реквизита для определения необходимости применения определенных классов
  3. Выполните настройку с помощью withStyles

Для варианта 3 стили компонента обтекания будут объединены с оригиналом, но CSS-классы компонента обертки появятся позже в<head> и победит над оригиналом.

Ниже приведен пример, показывающий все три подхода:

ReusableComponent.js 

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

const styles = {
  root: props => ({
    backgroundColor: props.rootBackgroundColor
      ? props.rootBackgroundColor
      : "green"
  }),
  inner: props => ({
    backgroundColor: props.innerBackgroundColor
      ? props.innerBackgroundColor
      : "red"
  })
};

const ReusableComponent = ({ classes, children, suppressInnerDiv = false }) => {
  return (
    <div className={classes.root}>
      Outer div
      {suppressInnerDiv && <div>{children}</div>}
      {!suppressInnerDiv && (
        <div className={classes.inner}>
          Inner div
          <div>{children}</div>
        </div>
      )}
    </div>
  );
};
export default withStyles(styles)(ReusableComponent);

index.js 

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

import ReusableComponent from "./ReusableComponent";

const styles1 = theme => ({
  root: {
    backgroundColor: "lightblue",
    margin: theme.spacing(2)
  },
  inner: {
    minHeight: 100,
    backgroundColor: "yellow"
  }
});
const Customization1 = withStyles(styles1)(ReusableComponent);

const styles2 = {
  inner: {
    backgroundColor: "purple",
    color: "white"
  }
};
const Customization2 = withStyles(styles2)(ReusableComponent);

function App() {
  return (
    <div className="App">
      <ReusableComponent>Not customized</ReusableComponent>
      <Customization1>Customization 1 via withStyles</Customization1>
      <Customization2>Customization 2 via withStyles</Customization2>
      <ReusableComponent rootBackgroundColor="lightgrey" suppressInnerDiv>
        Customization via props
      </ReusableComponent>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit styling reusable component

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...