tawny galleon
What's the preferred method for something like tailwinds group hover? I've got the following
<Group
mb="sm"
spacing={0}
grow
sx={{
border: "1px solid rgb(229,231,235)",
":hover": { border: "1px solid rgb(229,231,235)" },
"&:hover > .mantine-Group-child": {
backgroundColor: "rgb(0,0,0)",
color: "#FFF !important",
},
}}
p="0.25rem"
>
<UnstyledButton onClick={onClick}>
<Center>
<Text sx={{ color: "rgb(55,65,81)" }}>
<span style={{ marginRight: "0.25rem", fontSize: "14px", color: "rgb(107,114,128)" }}>
<FontAwesomeIcon icon="plus" type="fas" />
</span>
{title}
</Text>
</Center>
</UnstyledButton>
</Group>
If I hover over the button, I want a text element in UnstyledButton to change. Is there something in SX that allows me to target the Text element?
I tried doing (as shown above)
"&:hover > .mantine-Group-child": {
backgroundColor: "rgb(0,0,0)",
color: "#FFF !important",
},
But it doesn't override the text's own color, only the background color. Any ideas? Thanks
analog viper
raven sphinx