Material UI 中 sx prop 的用途是什么？

Question

<Box style={{ padding: "20px" }}>
  <Post post={post} setCurrentId={setCurrentId} />
</Box>

<Box sx={{ padding: "20px" }}>
  <Post post={post} setCurrentId={setCurrentId} />
</Box>

React.js + Material UI

上面的两个例子做了同样的事情，一个在material UI中使用了sx prop，另一个是使用css的常规内联样式，那么“sx”有什么意义呢？使用 Material UI 时是否应该始终使用 style={{}} ？

Answer 1

该sx道具是定义可以访问主题的自定义样式的快捷方式

它可以接受任何 CSS 属性以及来自 MUI 的一些额外属性。

有一些差异，例如：

1. 简写： padding-top可以写成pt。
2. 访问主题：如果您在 Material UI 中定义主题，则 sx prop 可以直接访问其属性，例如color. 文档中的示例：

import * as React from 'react';
import { Box, ThemeProvider, createTheme } from '@mui/system';

const theme = createTheme({
  palette: {
    background: {
      paper: '#fff',
    },
    text: {
      primary: '#173A5E',
      secondary: '#46505A',
    },
    action: {
      active: '#001E3C',
    },
    success: {
      dark: '#009688',
    },
  },
});

export default function Example() {
  return (
    <ThemeProvider theme={theme}>
      <Box
        sx={{
          bgcolor: 'background.paper',
          boxShadow: 1,
          borderRadius: 2,
          p: 2,
          minWidth: 300,
        }}
      >
        <Box sx={{ color: 'text.secondary' }}>Sessions</Box>
        <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'medium' }}>
          98.3 K
        </Box>
        <Box
          sx={{
            color: 'success.dark',
            display: 'inline',
            fontWeight: 'bold',
            mx: 0.5,
            fontSize: 14,
          }}
        >
          +18.77%
        </Box>
        <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 14 }}>
          vs. last week
        </Box>
      </Box>
    </ThemeProvider>
  );
}

sx 对象中的属性可以具有作为值的函数。这些功能也可以访问theme。

<Box sx={{ height: (theme) => theme.spacing(10) }} />

3. 网格属性： gap、rowGap和columnGap在 sx 中可用。
4. 响应式样式：可以根据不同的MUI设备大小简写来定义属性：

borderColor : { xs: "red", sm: "green" },

5. 访问子组件：您可以使用嵌套样式更改 chlid 组件的样式：

<TextField
  variant="outlined"
  sx={{
    '& .MuiInputBase-input': {
      color: 'white',
    },
  }}
/>

6. 不仅仅是 CSS：该sxprop 还支持 CSS 语法，包括子选择器和伪选择器、媒体查询等。例如：

<Box
  sx={{
    // some styles
    ":hover": {  //psuedo-selectors
      boxShadow: 6,
    },
    '@media print': {  //media-queries
      width: 300,
    },
  }}
>

资料来源：

1.

2.