Passing variable from React to CSS - proper formate and usage

Question

I need to pass some data to a component to be used in CSS calculations. These calculations will depend upon breakpoints as well. It isn't working and I believe that the issue is that I don't know where to place the "px".

React Side

<MainMenu className={styles.mainMenu} myVar={ref1.current.clientHeight - ref2.current.clientHeight/>

CSS Side

.mainMenu {
   @include breakpoint(xlarge) {
      margin-top: var(--myVar)px;
      height: calc(100vh - var(--myVar)px);
  }
   @include breakpoint(small) {
      margin-top: var(--myVar - 47)px;
      height: calc(100vh - var(--myVar - 47)px);
  }
}

Try e.g. calc(100vh - (var(--myVar) * 1px)) - assuming myVar does not already have a unit associated with it. — A Haworth
– A Haworth, Commented Jul 20, 2024 at 18:37

Angel Zlatanov · Accepted Answer · 2024-07-21 01:38:30Z

0

You never set a value for --myVar in your document style.

You also cant write stuff like this var(--myVar)px and this var(--myVar - 47)px

The solution would be in the lines of:

React Side

const myVar = ref1.current.clientHeight - ref2.current.clientHeight;
document.documentElement.style.setProperty('--myVar', `${myVar}px`);

CSS Side

.mainMenu {
    @include breakpoint(xlarge) {
       margin-top: var(--myVar);
       height: calc(100vh - var(--myVar));
   }
    @include breakpoint(small) {
       margin-top: calc(var(--myVar) - 47px);
       height: calc(100vh - var(--myVar) + 47px);
   }
 }

edited Jul 21, 2024 at 1:38

answered Jul 21, 2024 at 1:19

Angel Zlatanov

3261 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

Passing variable from React to CSS - proper formate and usage

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related