CODEWITHSUNDEEP
cssreactjsstyles
ajsaule
ajsaule

Reputation: 336

Transform on Material UI Icon showing "Invalid property value" (React)

Trying to get an Icon styled properly from Material UI to flip 180 degrees, CSS code is as follows:

sortIconDescending: {
    transform: [{ rotate: "180deg"}],
    cursor: 'pointer',
    marginLeft: 5,
},

For some reason when this class is applied on the icon, it denies the applied transform property:

><!> ̶t̶r̶a̶n̶s̶f̶o̶r̶m̶:̶ ̶[̶o̶b̶j̶e̶c̶t̶ ̶O̶b̶j̶e̶c̶t̶]̶;̶ - Err: Invalid property value

What am I doing wrong here?

Upvotes: 0

Views: 1715

Answers (1)

ajsaule
ajsaule

Reputation: 336

I found a valid solution, instead of applying the transform: property value as a array containing an object [{rotate: "180deg"}], you would just write the following code:

sortIconDescending: {
    transform: "rotate(180deg)",
    cursor: 'pointer',
    marginLeft: 5,
},

This seems to be the best solution.

Upvotes: 1

Related Questions