Adding Style Stored in a Variable Inside React Class

Adding style stored in a variable inside React class

You can't define a constant in the middle of a class, that's invalid syntax. Class bodies, by definition¹, can only contain method definitions, static method definitions, and empty statements (;)². Define the divStyle inside a method:

class HolaMundo extends React.Component {
    render() {
        const divStyle = {
            color: 'blue',
        };

        return (
          <div className="container" style={divStyle}> 
            <h1>Hola {this.props.name}</h1>
          </div>
        );
    }
}

---

¹Per the ECMAScript 2015 Language Specification, Section 14.5 - Class Definitions

²Babel currently supports class properties (with plugins). You can also assign an instance variable through the constructor, with this.style = { ... } and access it anywhere in the class with this.style.

Add custom CSS class via variable to returned jsx

its like inserting a string inside another or adding them together. You can use classname={"yourclasse" + theDynamicClass} or className={yourClass ${dynamicClass}} (inbetween ``)

Pass CSS variable as prop to the react component

You can pass the variable string as a props, and inject that into var():

<p style={{ color: `var(${color})` }}>Some Text</p>

---

const Card = ({color}) => {
    return (
        <p style={{ color: `var(${color})` }}>Some Text</p>
    )
}

class Example extends React.Component {    
    render() {
        return (
            <React.Fragment>
                <Card color={'--card-clr-red'} />
                <Card color={'--card-clr-violet'} />
            </React.Fragment>
        );
    }
}

ReactDOM.render(<Example />, document.body);

:root{
    --bg-clr-1: #E7F8F8;
    --card-clr-red: #F03E3E;
    --card-clr-violet: #7950F2;
    --card-clr-green: #12B886;
    --text-clr: #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Where to assign a variable inside a class component?

In the constructor you can do it like this:

constructor(props) {
  super(props);
  this.state = {
      rendersummaryAccordions: false,
      renderservicesAccordions: false,
      rendertravelAccordions: false, 
      renderratesAccordions: false, 
  };
  this.summaryCounter = 0;
}

Make sure to also update how you reference it to include this:

summaryAccordionsLogicGate = () => {
  this.setState({rendersummaryAccordions: true});
  console.log("summaryAccordionsLogicGate was called")
  this.summaryCounter = summaryCounter + 1;
}

Since you evidently are using the babel plugin to do class properties, another option instead of explicitly putting it in the constructor is to do it as a class property:

summaryCounter = 0;
summaryAccordionsLogicGate = () => {
  this.setState({rendersummaryAccordions: true});
  console.log("summaryAccordionsLogicGate was called")
  this.summaryCounter = summaryCounter + 1;
}

How to define css variables in style attribute in React and typescript

If you go to the definition of CSSProperties, you'll see:

export interface CSSProperties extends CSS.Properties<string | number> {
    /**
     * The index signature was removed to enable closed typing for style
     * using CSSType. You're able to use type assertion or module augmentation
     * to add properties or an index signature of your own.
     *
     * For examples and more information, visit:
     * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
     */
}

That page gives examples of how to solve the type error by augmenting the definition of Properties in csstype or casting the property name to any.

In React, how to pass a dynamic variable to a const CSS Style list?

Assuming files[0].preview returns a file (image) URL, you should be able to set a new style and pass it to the Dropzone component.

Something along these lines:

const renderDropzoneInput = (field) => {
  const files = field.input.value;
  let dropzoneRef;

  render() {
    let dropzoneStyle = {
      width: `200px`,
      height: `200px`,
      backgroundColor: `#1DA1F2`,
    };

    if (files[0]) {
      dropzoneStyle = {
        width: `200px`,
        height: `200px`,
        backgroundColor: `#1DA1F2`,
        backgroundImage: `url(${files[0].preview})`,
        // or to use a fixed background image
        // backgroundImage: `url(/path/to/static/preview.png)`,
        backgroundPosition: `center center`,
        backgroundRepeat: `no-repeat`
      };
    }

    return (
      <Dropzone
        name={field.name}
        ref={(node) => { dropzoneRef = node; }}
        accept="image/jpeg, image/png"
        style={dropzoneStyle}
      />
    )
  }
}  

a spread operator could be used to DRY this code a bit, with:

let dropzoneStyle = {
  width: `200px`,
  height: `200px`,
  backgroundColor: `#1DA1F2`,
};

if (files[0]) {
  dropzoneStyle = {
    ...dropzoneStyle,
    backgroundImage: `url(/path/to/static/preview.png)`,
    backgroundPosition: `center center`,
    backgroundRepeat: `no-repeat`
  };
}

Dynamically update scss class attribute by using variable in typescript React Application

Use inline styling for that.

<div style={{width: 10*betweenTimeIndexes.length + "px" }}>
  ...
</div>

---

Related Topics