Overriding Styles

How to override styles in the consumption layer.

Stitches provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values.

const Button = styled('button', {});
() => (
<Button css={{ borderRadius: '0', '&:hover': { backgroundColor: 'black', color: 'white', }, }} >
Button
</Button>
);

You can use tokens in the css prop.

const Button = styled('button', {});
() => (
<Button css={{ borderRadius: '$1', '&:hover': { backgroundColor: '$blue800', }, }} >
Button
</Button>
);

You can also use media queries in the css prop.

const Button = styled('button', {});
() => (
<Button css={{ borderRadius: '0', color: 'white', '&:hover': { backgroundColor: '$blue800', }, '@bp1': { backgroundColor: '$green800', }, '@bp2': { backgroundColor: '$purple800', }, }} >
Button
</Button>
);

Stitches provides an as prop for changing which tag a component outputs.

const Button = styled('button', {});
() => (
<Button as="a" href="#">
Button
</Button>
);