SxProps Type for sx property.

[mahyarmirrashed]

Actual Behaviour:

Accessing the type definition for the sx prop is convoluted. From my gathering, the only way is to use import { SxProps } from '@material-ui/system/styleFunctionSx/styleFunctionSx';.

Expected Behaviour:

Ideally, a solution like the one @rajzik suggested (import { SxProps } from '@material-ui/system';). Unfortunately, at the moment, this potential solution results in Module '"@material-ui/system"' has no exported member 'SxProps'.ts(2305).

Background:

There are several factors that lead to this issue:

1. I am using TypeScript (^4.0.3)
2. I am using Airbnb coding style for ESLint (^7.32.0)
   • Prevents usage of any type in TypeScript code.
   • Prevents usage of spread operator into props of components.
3. I am forced to explicitly write the types the component receives.

Code:

import * as React from 'react';
import { Link, Typography } from '@material-ui/core';
import { SxProps } from '@material-ui/system/styleFunctionSx/styleFunctionSx';

export type CopyrightProps = {
  sx: SxProps;
};

const Copyright: React.FunctionComponent<CopyrightProps> = ({ sx }) => (
  <Typography variant="body2" color="text.secondary" align="center" sx={sx}>
    {'Copyright &copy; '}
    <Link color="inherit" href="/">
      Affinity Patient Portal
    </Link>
    {` ${new Date().getFullYear()}.`}
  </Typography>
);

export default Copyright;

[rajzik]

You can use:

import { SxProps } from '@material-ui/system';

[eps1lon]

Thanks for the feedback.

It's not clear from the current description what the problem is. Please don't just discard the issue template you're prompted with but fill it out. Specifically, actual behavior and expected behavior.

[mahyarmirrashed]

You can use:

import { SxProps } from '@material-ui/system';

Unfortunately, this solution does not work. I get the following error even after adding @material-ui/system to my project's dependencies: Module '"@material-ui/system"' has no exported member 'SxProps'.ts(2305).

[mahyarmirrashed]

Thanks for the feedback.

It's not clear from the current description what the problem is. Please don't just discard the issue template you're prompted with but fill it out. Specifically, actual behavior and expected behavior.

Okay sounds good. Sorry about that. Updated.

[mnajdova]

@mahyarmirrashed please share a codesandbox illustrating the issue. The import proposed in #27564 (comment) should work.

[rajzik]

You can use:

import { SxProps } from '@material-ui/system';

Unfortunately, this solution does not work. I get the following error even after adding @material-ui/system to my project's dependencies: Module '"@material-ui/system"' has no exported member 'SxProps'.ts(2305).

We are using airbnb and other strict rules according to type safety, and we are using import { SxProps } from '@material-ui/system'; with no problem.
This line should be the export. Did you try another version of typescript?

[mahyarmirrashed]

You can use:

import { SxProps } from '@material-ui/system';

Unfortunately, this solution does not work. I get the following error even after adding @material-ui/system to my project's dependencies: Module '"@material-ui/system"' has no exported member 'SxProps'.ts(2305).

We are using airbnb and other strict rules according to type safety, and we are using import { SxProps } from '@material-ui/system'; with no problem.
This line should be the export. Did you try another version of typescript?

Issue solved. This last comment about the TypeScript version is key. yarn create react-app with --typescript flag ships with TypeScript version ^4.0.3. Even adding @material-ui/system with yarn add @material-ui/system to the dependency list would not work with that version of TypeScript.

Solution:

yarn remove typescript and yarn add typescript ensuring that the TypeScript version is ^4.3.5 at the time of writing with the addition of yarn add @material-ui/system to the dependency list inside package.json.

Future steps:

Perhaps adding this as a caveat or note somewhere either in create-react-app or in the MaterialUI notes?

[bkinsey808]

How do I import SxProps with the new @mui import?

[fxlemire]

@bkinsey808

import { SxProps } from '@mui/system';

[pitis]

@bkinsey808

import { SxProps } from '@mui/system';

this doesn't work anymore. Now you need to import from @mui/material

[komali2]

@bkinsey808

import { SxProps } from '@mui/system';

this doesn't work anymore. Now you need to import from @mui/material

This helped me, thank you. Can I ask how you knew how to do this? I've found that to look up types for libraries like MUI, I have to google until I find an issue like this. I tried looking at the docs and of course following component definitions through the code itself, but in this case for example failed to find a type definition for SX or how to import it. How did you know?

[gyrgy]

For me this import seems like working:
import { SxProps } from '@mui/material';

[rek]

Try:

import type { SxProps } from '@mui/material';

[evgeniy-kolmak]

Пытаться:

import type { SxProps } from '@mui/material';

it's worrked