🦱
classes overrides
Overriding internal styles by user provided styles.
Every MUI components accepts a
classes props that enables you override the internal styles (see MUI's doc).With TSS you can easily do the same for your components, it's done by merging the internal
classes and the one that might have been provided as props.Modern API
makeStyles API
type Props = {
//classes?: { foo?: string; bar?: string; };
classes?: Partial<ReturnType<typeof useStyles>["classes"]>;
};
function MyComponent(props: Props) {
const { classes } = useStyles({
classesOverrides: props.classes
});
return (
<div className={classes.foo}>
<span className={classes.bar}>
The background should be green, the box should have a dotted
border and the text should be pink
</span>
</div>
);
}
const useStyles = tss.create({
"foo": {
"border": "3px dotted black",
"backgroundColor": "red"
}
"bar": {
"color": "pink"
}
});
//...
render(
<MyTestComponentForMergedClassesInternal
classes={{ "foo": css({ "backgroundColor": "green" }) }}
/>
);
type Props = {
//classes?: { foo?: string; bar?: string; };
classes?: Partial<ReturnType<typeof useStyles>["classes"]>;
};
function MyTestComponentForMergedClassesInternal(props: Props) {
const { classes } = useStyles({ "color": "pink" }, { props });
//NOTE: Only the classes will be read from props,
//you could write { props: { classes: props.classes } } instead of { props }
//and it would work the same.
return (
<div className={classes.foo}>
<span className={classes.bar}>
The background should be green, the box should have a dotted
border and the text should be pink
</span>
</div>
);
}
const useStyles = makeStyles<{ color: string; }>()({
"foo": {
"border": "3px dotted black",
"backgroundColor": "red"
}
"bar": {
color
}
});
//...
render(
<MyTestComponentForMergedClassesInternal
classes={{ "foo": css({ "backgroundColor": "green" }) }}
/>
);
Last modified 1mo ago