🩳
MUI sx syntax

I do not recommend using the Sx syntax in conjunction with TSS, I don't see the value of it. 
Sx syntax primary avantage is to be more consise which is an important factor when mixing your JSX and styles.  TSS however enable have separates the two.  
Given this I'd rather write: 
backgroundColor: theme.palette.primary.main
than
backgroundColor: "primary.main"
The second is shorter all right but we trade type safery in the sake of brievety, IMO it isn't worth it.  
Do not esitate to reach by opening a discution about it if you think I'm missing something. 
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]
            }
        }
    })
}));
Publish a module that uses TSS
single-spa
Last modified 1mo ago