After diving into react flow, I found it to be quite user-friendly. However, I've hit a roadblock while attempting to update the styles of a selected node. My current workaround involves using useState to modify the style object for a specific Id. Is there a more efficient way to apply styling to selected/focused nodes using the style prop?
const nodeStyle = {
padding: '0.7rem',
height: '7rem',
width: '12rem',
borderColor: '#868DA0',
borderRadius: '3px',
'&:focus': { <----doesn't work
backgroundColor: 'blue',
color: 'blue',
padding: '5rem',
borderRadius: '7px',
},
}
export default function Flow({ items, itemConnections }: FlowProps) {
const nodes = items.map(({ id, x_position, y_position, name }) => ({
id,
data: {
label: name
},
position: { x: x_position, y: y_position },
style: nodeStyle, <------- Styles passed in here
}))
return (
<Box>
{items.length === 0 ? (
<EmptyFlowBox />
) : (
<ReactFlow elements={[...nodes, ...itemConnections]}>
<Controls />
</ReactFlow>
)}
</Box>
)
}