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?

Check this out - [link](https://stackoverflow.com/questions/26839356/how-can-i-apply-fallback-style-properties-to-a-react-js-component) — simplecreator, Oct 02 '20 at 13:07
thanks, @simplecreator, guess I have to use the current approach coz others are no good than this anyway. — Vivek Sharma, Oct 02 '20 at 13:19

Esger · Answer 1 · 2020-10-02T13:31:59.137

0

.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.

edited Oct 02 '20 at 13:31

answered Oct 02 '20 at 13:07

Esger

no, you cannot do that in JCSS as it is a js object and cannot store keys with the same name. – Vivek Sharma Oct 02 '20 at 13:19

1 Answers1