Select a recipe's slot inside another slot in the recipe definition #2331
Answered
by
astahmer
RemyMachado
asked this question in
Q&A
-
I was wondering if there was a way to select a slot inside another. defineSlotRecipe({
slots: ['slot1', 'slot2'],
base: {
slot1: {
'& > slot2': {
color: '2'
}
},
slot2: {
color: '1'
},
}
} I also tried using the class selector, |
Beta Was this translation helpful? Give feedback.
Answered by
astahmer
Mar 10, 2024
Replies: 1 comment 1 reply
-
hey, recipes have deterministic className generation based on this: const button = defineRecipe({
className: 'btn',
slots: ['root', 'text'],
base: {
root: {
bg: 'blue.500',
_hover: {
// v--- 🎯 this will target the `text` slot
'& .btn__text': {
color: 'white',
},
},
},
},
}) also, I just added a PR to do the same with |
Beta Was this translation helpful? Give feedback.
1 reply
Answer selected by
RemyMachado
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hey, recipes have deterministic className generation based on this:
${className}__${slotName}
also, I just added a PR to do the same with
sva
#2348