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

emotion/sx-prop

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

sx prop accepts styles object or function

The sx prop accepts either a styles object with CSS properties and pseudo-selectors or a function that receives (theme, utilities) and returns a styles object.

sx prop example with object

Example: <Box sx={{ padding: 40, '&:hover': { padding: 80 } }}>Box with object sx</Box>

sx prop example with function

Example: <Button sx={(theme, u) => ({ padding: 10, [u.light]: { backgroundColor: theme.colors.blue[0], color: theme.colors.blue[9], '&:hover': { backgroundColor: theme.colors.blue[1] } }, [u.dark]: { backgroundColor: theme.colors.blue[9], color: theme.colors.blue[0], '&:hover': { backgroundColor: theme.colors.blue[8] } } })}>Button with function sx</Button>

mergeSx function for combining sx props

Use mergeSx function to merge multiple sx props into one. Useful for merging sx prop provided to custom component with its own sx. Example: <Box sx={mergeSx(theme => ({ ... }), sx)}>...</Box>

Give your agent this brain