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

style-prop

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

Style prop basic usage

All Mantine components that have a root element support the style prop. It works similarly to the React style prop but with additional features.

Style object with CSS variables

You can pass a style object to the style prop as a React inline style object. Mantine CSS variables can be used in the style object the same way as in .css files. Example: <Box style={{ color: 'var(--mantine-color-red-5)', fontSize: rem(12) }} />

Define CSS variables in style prop

CSS variables can be defined directly in the style prop of Mantine components. Example: <Box style={{ '--radius': '0.5rem', borderRadius: 'var(--radius)' }} />. This only works with Mantine components, not HTML elements.

Style function receives theme object

You can pass a style function to the style prop instead of a style object. The function is called with the theme object as its parameter, allowing access to theme properties not exposed as CSS variables, such as properties from theme.other. Example: <Box style={(theme) => ({ color: theme.colors.red[5], fontSize: theme.fontSizes.xs })} />

Styles array merging

You can pass an array of style objects and/or functions to the style prop. All styles in the array will be merged into one object. This is useful when creating a wrapper around a Mantine component, adding inline styles while keeping the option to pass the style prop to it. Example: <Box style={[{ color: 'red' }, style]} /> where style is passed as a prop and merged with the array.

MantineStyleProp type

The MantineStyleProp type is available from @mantine/core and can be used to type the style prop when creating wrapper components.

Give your agent this brain