🩳
MUI sx syntax
import { unstable_styleFunctionSx } from "@mui/system";
import type { CSSObject } from "tss-react";
export const styleFunctionSx = unstable_styleFunctionSx as (params: object) => CSSObject;
function TestSxComponent() {
const { classes } = useStyles();
return (
<div className={classes.root}>
Should look like: https://mui.com/material-ui/react-box/#the-sx-prop
but in green.
</div>
);
};
const useStyles = makeStyles()(theme => ({
root: styleFunctionSx({
theme,
sx: {
width: 300,
height: 300,
backgroundColor: "primary.dark",
"&:hover": {
backgroundColor: 'primary.main',
opacity: [0.9, 0.8, 0.7]
}
}
})
}));
Last modified 14d ago