new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

Mantine · all subjects

styling & css api

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Input alignment issue in flex containers with buttons

Mantine inputs do not align with buttons in flex containers by default because Mantine inputs have associated elements including label, description, and error message. These associated elements affect the overall layout height and alignment.

Align input with button using inputContainer prop

To align a Mantine input with a button in a flex container, use the inputContainer prop to wrap the button next to the input. This ensures proper alignment between the input and button.

Align input with button by repositioning error and description

An alternative method to align a Mantine input with a button is to change the error and description message positions to absolute using the Styles API. This removes those elements from the normal document flow, allowing the input to align properly with the button.

All Mantine components use mantine- class prefix

All Mantine components have static classes that start with the `mantine-` prefix by default.

Apply styles to all Mantine components with attribute selector

Use a CSS attribute selector with the pattern `[class^=mantine]` to apply styles to all Mantine components. For example, `[class^=mantine] { color: red; }` applies red text color to all Mantine components.

Update attribute selector when classNamesPrefix changes

If you set a custom `classNamesPrefix` prop on `MantineProvider`, you must update the attribute selector to match the new prefix. For example, if `classNamesPrefix="app"` is set, use `[class^=app]` as the selector.

MantineProvider classNamesPrefix prop example

The following example shows how to set a custom class name prefix on MantineProvider: ```tsx import { MantineProvider, Text } from '@mantine/core'; function Demo() { return ( <MantineProvider classNamesPrefix="app"> <Text>Just some text</Text> </MantineProvider> ); } ```

Give your agent this brain