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

Activate CSS transition only when not in active state

The useCallback hook provides access to the previous state value

Is it possible for Angular's `HttpClient` to use complex property types in the `.get()` generics aside from just `string` or `number`?

Bringing elements into perfect harmony in Angular

Tips for implementing a single function across multiple HTML classes using JavaScript

react-chart2: The 'map' property is not defined and cannot be read

How can you show a green check mark next to an input field in AngularJS after inputting valid data?

"Adaptive Material UI design that adjusts according to the size of the

Determine the starting position of a div's CSS bottom using jQuery before the hover animation begins

retrieve data from a form using reference values

Repositioning with Flexbox: shifting the middle element to a new line

Tips to prevent the return of undefined when a condition is not satisfied

You need a function property for the child component to be updated

The process of compiling with react-scripts suddenly crashes, leaving behind no error message except for a vague reference to running out of memory. On

When the React Redux store is updated, the component does not automatically re-render

Issue with Tailwind CSS shadow and transition failing to work after activating JIT mode

Is there a similar alternative to {useLocation} provided by 'react-router-dom' that can be used in Next.js?

Expand the display on mobile devices

How can I insert a item into an Array using JavaScript code?

Difficulty with spacing in HTML/CSS styling