PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Saturday, November 5, 2022

[FIXED] How to use environment variables in ReactJS imported CSS?

 November 05, 2022     create-react-app, css, environment-variables, reactjs     No comments   

Issue

I created a simple React app using https://github.com/facebookincubator/create-react-app.

I am trying to specify a configurable URL to a component's CSS like this:

.Cell {
    background-image: url({process.env.REACT_APP_STATIC_URL}./someImage.png);
}

And here's the component:

import React from 'react';
import './Cell.css'

class Cell extends React.Component {
    render() {
        return (
            <div className="Cell">
                {this.props.name}
            </div>
        );
    }
}

But it doesn't look like the process variable trickles down to the imported CSS. How would I go about doing this?


Solution

If you want to use js variables in CSS, try React inline-style instead of plain css file.

https://facebook.github.io/react/tips/inline-styles.html

If you want to separate CSS and JS, you might need a CSS preprocessor to manage your global variables.



Answered By - Jean Y.C. Yang
Answer Checked By - Senaida (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing