Jak ostylować wybraną rzecz dla IE I Edge w Reacie?

Tak jak w temacie? Istnieje coś takiego? Chciałbym np. podać inną wartość szerokości dla przeglądarek IE i Edge dla

styled.div

Wydaje mi się że jeżeli chcesz ostylować element inaczej dla pewnych przeglądarek to jedynym wyjściem jest if.

const isIE = /*@cc_on!@*/false || !!document.documentMode;   // IE 
const isEdge = !isIE && !!window.StyleMedia;    // Edge 20+

if(isIE || isEdge)
{
   styled.div...
}
else
{
    styled.div...
}

Detekcja przeglądarek https://stackoverflow.com/questions/49328382/browser-detection-in-reactjs

Skorzystaj z userAgent.

function getBrowserId () {
var aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
sUsrAg = navigator.userAgent,
nIdx = aKeys.length - 1;

for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);

return nIdx;
}

console.log(getBrowserId());

https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator

Yukiteru Gromadzki napisał(a):

Wydaje mi się że jeżeli chcesz ostylować element inaczej dla pewnych przeglądarek to jedynym wyjściem jest if.

const isIE = /*@cc_on!@*/false || !!document.documentMode;   // IE 
const isEdge = !isIE && !!window.StyleMedia;    // Edge 20+

if(isIE || isEdge)
{
   styled.div...
}
else
{
    styled.div...
}

Detekcja przeglądarek https://stackoverflow.com/questions/49328382/browser-detection-in-reactjs

Czyli jeśli np. chce tylko podmienić szerokość dla diva, ale pozostałych styli dla diva mam np. 30 linii kodu to musze dwa razy powielić te style w ifie i elsie?

Nope nie musisz nic powielać, instrukcje warunkowe możesz dawać również w styled components.

Haskell napisał(a):

Nope nie musisz nic powielać, instrukcje warunkowe możesz dawać również w styled components.

Bezpośrednio w styled.div nie mogę dać tego ifa, bo krzyczy błędami, poza styled.div mogę normalnie dodać.

Zgadza się, nie możesz tam wkleić tego IF-a, zamiast tego użyj ternary operator:

const StyledYourComponent = styled(YourComponent)`
  background: ${props => props.active ? 'darkred' : 'limegreen'}
`

Haskell napisał(a):

Zgadza się, nie możesz tam wkleić tego IF-a, zamiast tego użyj ternary operator:

const StyledYourComponent = styled(YourComponent)`
  background: ${props => props.active ? 'darkred' : 'limegreen'}
`

Ale chcialem dodac style dla IE i Edge, a przekazanie propsa nic mi nie da w tym wypadku chyba.