在 `mui` 中使用哪些样式以及它们的区别是什么

Question

我已经使用 mui 几个星期了，每个示例都看到 styled 不同的导入方式。一些示例从 @mui/material/styles 导入，其他示例从 @mui/system .

并且在文档中它只解释了 @mui/system 。我想知道区别。

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 并且也不适用于 React 18。

@mui/system 是旧包的推荐替代品。

您可以继续使用 @mui/material/styles，但在某个时候它可能不再受支持并且已经限制您使用旧版本的 React。

在 `mui` 中使用哪些样式以及它们的区别是什么

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

user-interface

emotion

reactjs

material-ui