Updating CSS Module @Value with React

Question

I am using CSS module along with react. I want to change the border-radius dynamically from react. In the box.css , i set the border-radius as radiusValue. My goal is to modify the value of radiusValue from a react component. Is that possible? I couldn't find any solution related to updating the @value variable.

Thank you

inside box.css:

@value radiusValue:0px

.box{
    height: 200px;
    width: 300px;
    border: 10px solid #595252;
    border-radius: radiusValue;
    padding: 100px;
    margin: 50px;
}

Krystian Sztadhaus · Accepted Answer · 2022-06-23 02:20:38Z

1

You can not do that with CSS pre-processors, because they generate static files that can not be changed on the fly,
but you can do this with pure CSS - specifically with CSS Custom properties.

CSS file:

:root {
  --radius-value: 0px;
}

.box {
    height: 200px;
    width: 300px;
    border: 10px solid #595252;
    border-radius: var(--radius-value);
    padding: 100px;
    margin: 50px;
}

JS file

element.addEventListener("click", () => {
  root.style.setProperty("--radius-value", "20px")
})

answered Jun 23, 2022 at 2:20

Krystian Sztadhaus

4942 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Updating CSS Module @Value with React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest