AnswerBun.com

React class components - conditional styling based on props

Stack Overflow Asked by tmc on January 3, 2022

I’m working with older versions of material-ui with no possibility to upgrade.

I am trying to change the background of the Paper component based on a few combinations of the props. I don’t think it’s complicated to require use of the makeStyles HOC. Is this possible?

I think the problem is this line:
classes={{ root: correctBackgroundColor.root }}

but the documentation on the https://v0.material-ui.com/#/components/paper unhelpfully says "Other properties (not documented) are applied to the root element."

import React from "react";

const correctBackgroundColor = {
  root: {
    width: 30,
    height: 30,
    border: "1px solid lightgrey",
    backgroundColor: props => {
      if (props.ledIsOn === true && props.ledColorType === "Green") {
        return "#00FF00";
      }
      if (props.ledIsOn === true && props.ledColorType === "Orange") {
        return "#FFA500";
      } 
    }
  }
};

class ColorChange extends React.Component {
  render() {
    const { classes } = this.props;
    let textToRender = (
      <Paper
        id={this.props.id}
        classes={{ root: correctBackgroundColor.root }}
      />
    );
    return (
      <div>
        <Typography variant="p" className={classes.typography_root}>
          {this.props.textLabel}
        </Typography>
        {textToRender}
      </div>
    );
  }
}

export default withStyles(styles)(ColorChange);

there is a sandbox at : https://codesandbox.io/s/adoring-bell-oyzsn TIA!

One Answer

I hope i got you right. There are two things you should put attention to:

First, correctBackgroundColor does not recognize props because this is out of scope, therefore, I would recomment to change it into a function, pass the props to it, and make the function return a style object.

Second thing, I would use style when applying the object to Paper, so the style of that paper would be a call to correctBackgroundColor with the props, like this:

<Paper id={this.props.id} style={correctBackgroundColor(this.props)} />

Final code:

import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";
import Typography from "@material-ui/core/Typography/Typography";
import Paper from "@material-ui/core/Paper/Paper";

const styles = theme => ({
  typography_root: {
    fontSize: 12,
    margin: 10
  }
});
const correctBackgroundColor = props => {
  let bgSwitch = "none";
  if (props.ledIsOn === true && props.ledColorType === "Green")
    bgSwitch = "#00FF00";
  if (props.ledIsOn === true && props.ledColorType === "Orange")
    bgSwitch = "#FFA500";
  if (props.ledIsOn === true && props.ledColorType === "Red")
    bgSwitch = "#FF0000";
  if (props.ledIsOn === true && props.ledColorType === "Grey")
    bgSwitch = "lightGrey";
  return {
    width: 30,
    height: 30,
    border: "1px solid lightgrey",
    backgroundColor: bgSwitch
  };
};

class ColorChange extends React.Component {
  render() {
    const { classes } = this.props;
    let textToRender = (
      <Paper id={this.props.id} style={correctBackgroundColor(this.props)} />
    );
    return (
      <div>
        <Typography variant="p" className={classes.typography_root}>
          {this.props.textLabel}
        </Typography>
        {textToRender}
      </div>
    );
  }
}

export default withStyles(styles)(ColorChange); //with styles injects classes props with styles contained.

Code Sandbox

Answered by SomoKRoceS on January 3, 2022

Add your own answers!

Related Questions

mean(,na.rm = TRUE) returns NA and Warning Message

1  Asked on January 5, 2022 by dylan-ong

 

StringIndexOutOfBoundsException:

1  Asked on January 5, 2022 by benjamin-weed

   

How to use a promise inside a promise?

3  Asked on January 5, 2022

 

Ask in C++ code to promp user for function expression input

1  Asked on January 5, 2022 by tbaracu

     

Why does flex-basis calculation return an error in SASS?

1  Asked on January 5, 2022 by simplicius

   

Why does the ul element show when input is clicked?

1  Asked on January 5, 2022 by e-reiner

       

Why does this list element move back in the list?

1  Asked on January 5, 2022 by user13990775

   

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir