MUI sx prop used with emotion js

by

I’m trying to get the sx props to return plain css, this code:

import { unstable_styleFunctionSx as styleFunctionSx, SxProps } from "@mui/system";
import { css } from "@emotion/react";
import { CustomTheme } from "../..";

interface GetResponsiveStyleArgs {
  sx?: SxProps;
  theme: CustomTheme;
}

export const getResponsiveStyle = (args: GetResponsiveStyleArgs) => {
  const { theme, sx = {} } = args;

  const xsStyles = styleFunctionSx({ theme, sx });

  return css(xsStyles);
};

seems to work but typescript complain because of:

Argument of type 'CSSObject' is not assignable to parameter of type 'TemplateStringsArray'

I’ve tried to use the css function from mui but still the same error, I can’t use the styled function because I don’t know the type of the component at this point, is there a way to use the sx props outside a mui component?

Leave a Comment