Is there any way to control the size of CloseButton in Drawer?

[albertbronsky]

It appears that Drawer is using ActionIcon for CloseButton. Is there any way to control its size to make it larger?

[rtivital]

You you can customize CloseButton styles with closeButton selector using Styles API

[rtivital]

You can add these styles via styles prop, I've shared styles that you need to apply

[2Up1Down]

How do you apply styles to via desctendent combinator, e.g in this case .closeButton svg?

The following is not valid code:
styles={ { .closeButton svg { width: 50px; height: 50px } } }

My drawer component looks currently like this:
<Drawer opened={opened} onClose={() => setOpened(false)} title="Filter settings" padding="xl" size="xl" > //<RangeForm onSubmit={closeDrawer} /> </Drawer>

[rtivital]

<Drawer styles={{ closeButton: { '& svg': { width: 50, height: 50 } } }} />

[2Up1Down]

@rtivital Thank you very much. '& svg' was the missing piece.

[Strajk]

For future visitors from Google, nested selectors in styles prop ({ '& svg':) is no longer supported in Mantine 7 https://mantine.dev/guides/6x-to-7x/#styles-prop