v4
Search…
⌃K
Links
🩳

MUI sx syntax

You can use the MUI's Sx syntax in MUI like so:
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]
}
}
})
}));