How to add multiple css property with same name in react?

Question

I am using react and came across a situation where I needed a fallback CSS property.

Normal CSS code:

.grid{
  position:sticky;
  position: -webkit-sticky;
}

Currently, I am getting it done by using two different classes and adding both the classes to the component (using classnames library). Like this:

<Grid className={classnames(c1,c2)}/>

where c1 and c2 both have position property but with different values.

My question being that am I doing it in the right manner? If not, Is there any workaround?

Answer 1

.c1{
  position:sticky;
}
.c2{
  position:-webkit-sticky;
}

The browser will apply what it suports. I never worked with React, but I'm pretty sure there'd a better way to write the fall-back properties.