Create your own CSS properties in the utils
object. Add as many utils as you need. Below are a few examples:
export const { styled, css } = createStyled({
utils: {
m: (config) => (value) => ({
marginTop: value,
marginBottom: value,
marginLeft: value,
marginRight: value,
}),
mt: (config) => (value) => ({
marginTop: value,
}),
mr: (config) => (value) => ({
marginRight: value,
}),
mb: (config) => (value) => ({
marginBottom: value,
}),
ml: (config) => (value) => ({
marginLeft: value,
}),
mx: (config) => (value) => ({
marginLeft: value,
marginRight: value,
}),
my: (config) => (value) => ({
marginTop: value,
marginBottom: value,
}),
size: (config) => (value) => ({
width: value,
height: value,
}),
linearGradient: (config) => (value) => ({
backgroundImage: `linear-gradient(${value})`,
}),
br: (config) => (value) => ({
borderRadius: value,
}),
},
});
The
config
is your configuration and thevalue
will be the value passed in via the CSS property.
Try it out in the example below.
const Box = styled('div', {
size: '200px',
linearGradient: '19deg, #21D4FD 0%, #B721FF 100%',
br: '$round',
});
render(<Box />);
You can type the value against a specific scale to improve the developer experience.
export const { styled, css } = createStyled({
utils: {
mx: (config) => (value: keyof typeof theme['space'] | (string & {})) => ({
marginLeft: value,
marginRight: value,
}),
},
});