Pass prop into style={{}} on hover

I need to send a hex-color into the styles that depends on my data, specifically

  '&:hover': {
    color: props.color  
  }

  '&:hover': {
    color: props.color  
  }

unfortunately when I use plain style the on-hover isn't working, when I use suid's styled I can't pass the prop

3 Replies

lxsmnsyc•2y ago

well nested selectors (or selectors, in general) isn't supported by plain style

BersaelorOP•2y ago

yeah, thats why i was looking into import { styled } from "@suid/material";

Why not use normal CSS for .class:hover { color: var(--whatever-color); } and then in the component style={{ '--whatever-color': props.color }}?