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" }) }}
/>
);