Which styled in `mui` to use and what are their differences

Question

I've been using mui for a few weeks now and each example sees styled importing differently. Some examples import from @mui/material/styles , others from @mui/system .

And in the documentation it only explains @mui/system . I would like to know the differences.

import { styled } from "@mui/material/styles";

const newButton = styled(Button)({
  boxShadow: 'none',
  textTransform: 'none',
  fontSize: 16,
  padding: '6px 12px'
});

// or
import { styled } from "@mui/system";

const newButton = styled(Button)({
  boxShadow: 'none',
  textTransform: 'none',
  fontSize: 16,
  padding: '6px 12px'
});

Answer 1

@mui/material/styles is a legacy package. It is not compatible with React.StrictMode and also won't work with React 18.

@mui/system is the recommended alternative to the legacy package.

You can continue using @mui/material/styles, but at a certain point it may no longer be supported and will already limit you to older versions of React.