Tips for sending a value or props to a CSS file

Question

Tips for sending a value or props to a CSS file

Is there a way to dynamically update the x and y position based on user clicks, and then apply these changes to the top and left properties of a div?

.dataCardAbsolute {
  position: absolute;
  top: 100px;
  left: 300px;
  overflow: auto;
}

React.useEffect(() => {
    document.body.addEventListener('click', (event) => { setPosition([event.pageX, event.pageY]) })
}, []);

<div
  className={{styles.`dataCardAbsolute-${}`}} //trying to figure it out...
  className={styles.dataCardAbsolute}         
>

Can anyone suggest a method for sending the updated position values to the CSS file?

css reactjs

Answer 1

Answer №1

If you're looking to enhance your CSS skills, one cool technique you can experiment with is utilizing CSS variables within your stylesheets.

CSS variables offer the flexibility to define default values directly in the "style" attribute of a div element.

Here's a neat example to illustrate this concept:

document.addEventListener("DOMContentLoaded", () => {
  let button = document.getElementById("buttonID");
  let item = document.getElementById("itemID");
   
   let toggle = false;

  button.addEventListener("click", () => {
    item.style = toggle ? "--radius: 50%;" : "--radius: 20%;";
    toggle = !toggle;
  });
});

html, body {
  width: 100%;
  height: 100%;
}

.button {
  background-color: aliceblue;
  width: 20%;
  height: 20%;
}

.item {
  border-radius: var(--radius);
  
  background-color: green;
  width: 30%;
  height: 40%;
}

<button class="button" id="buttonID">Resize the item</button>
<div class="item" id="itemID" style="--radius: 50%;"></div>

Answer 2

If you're looking to enhance your CSS skills, one cool technique you can experiment with is utilizing CSS variables within your stylesheets.

CSS variables offer the flexibility to define default values directly in the "style" attribute of a div element.

Here's a neat example to illustrate this concept:

document.addEventListener("DOMContentLoaded", () => {
  let button = document.getElementById("buttonID");
  let item = document.getElementById("itemID");
   
   let toggle = false;

  button.addEventListener("click", () => {
    item.style = toggle ? "--radius: 50%;" : "--radius: 20%;";
    toggle = !toggle;
  });
});

html, body {
  width: 100%;
  height: 100%;
}

.button {
  background-color: aliceblue;
  width: 20%;
  height: 20%;
}

.item {
  border-radius: var(--radius);
  
  background-color: green;
  width: 30%;
  height: 40%;
}

<button class="button" id="buttonID">Resize the item</button>
<div class="item" id="itemID" style="--radius: 50%;"></div>

Answer 3

Answer №2

It appears that the setter function's state is related to position, which means updating it would require inline style adjustments. The most straightforward approach would be to update it using inline styles.

 <div
      className={styles.dataCardAbsolute}
      style={{ top: `${position.top}px`, left: `${position.left}px` }}
    >

Answer 4

It appears that the setter function's state is related to position, which means updating it would require inline style adjustments. The most straightforward approach would be to update it using inline styles.

 <div
      className={styles.dataCardAbsolute}
      style={{ top: `${position.top}px`, left: `${position.left}px` }}
    >

Tips for sending a value or props to a CSS file

Answer №1

Answer №2

Similar questions

Ways to conceal the contents of a page behind a transparent background div while scrolling

The URL is being modified, yet the page remains static in the React application

Unsure why my React component isn't triggering a re-render?

Exploring the usage of symbols within routes in the latest version of React Router

Guide to dynamically setting SCSS $variables in JavaScript after retrieving them from local storage in a React application

Challenges with Hover Dropdowns in Bootstrap Navigation Menu

Modify CSS image according to the user interface language in asp.net

What steps do I need to take to extract the date and month from a single datepicker using the code below?

Should the element be scrolled beyond a fixed-positioned element

The Google Visualization chart fails to display properly once CSS is applied

How can I ensure that Redux-saga waits for API calls to resolve instead of returning promises continuously? Is there a way to make "yield call" wait for API calls to complete?

Tips on displaying tooltip specifically for displaying x values only in React charts

Issue with Material UI Menu not obtaining the accurate ID

The alignment of my divs is all out of whack -

Encountering an issue while setting up a Next.js project, I am struggling to find a solution despite trying various methods

Endless loop occurs with post and put requests while attempting to refresh authentication token

Setting up Swiper in a ReactJS environment

What is causing Firefox to display an additional line in this section?

Assigning a new classification to the primary object in the evolving array of objects

An issue arose when attempting to publish a project using react and Node.js on two different servers