new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Mantine · all subjects

variants-sizes/custom-variants

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

Custom variants with data-variant attribute

Most Mantine components support the variant prop, which is exposed as a data-variant="{value}" attribute on the root element. Custom variants can be added by creating styles that use the [data-variant="{value}"] selector. For example, to add an 'underline' variant to the Input component, you would define styles for [data-variant="underline"]. Custom variants can be added to any component that supports the Styles API, even if no variants are defined in the library.

Override existing component variants

Existing component variants can be overridden using CSS selectors. For example, to change the filled variant of the Input component, use the selector .input[data-variant="filled"].

Custom variant types with TypeScript

Custom variant types can be defined by creating a mantine.d.ts file in your project and extending the appropriate Props interface. For example, to add custom variant types to the Button component, extend ButtonProps with a new variant type that includes both ButtonVariant and custom variant names like 'contrast' or 'radial-gradient'.

Give your agent this brain