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'
});
CodePudding user response:
@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.