Material UI 中 sx 道具的作用是什么？答案

【问题标题】：What is the purpose of sx prop in Material UI?Material UI 中 sx 道具的作用是什么？
【发布时间】：2022-02-07 15:00:53
【问题描述】：

<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={{}} 上使用它？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

sx 属性是定义具有访问权限的自定义样式的快捷方式到主题

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

有如下区别：

shortHand : padding-top 可以写成pt。
访问主题：如果你在材质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>
  );
}

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

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

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

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

来源：

【讨论】：

【解决方案2】：

sx 属性允许您使用所有 mui 系统属性以及 CSS 属性。使用style={{}} aproch，您可以直接添加 CSS 属性，但不能在其中使用 mui 属性。例如主题属性。

使用 SX 道具：您可以在主题中设置一次颜色。然后在您的所有应用程序中使用相同的颜色。那么以后你想改变颜色，你只能在主题中改变它一次，它将自动应用于所有应用程序。

sx={{ color: 'primary.main' }}

使用样式：但是您必须在编写应用程序时记住确切的颜色代码，然后如果您决定更改，则必须在应用程序的任何地方进行更改。

style={{ color: '#00ff00' }}

还有一些 CSS 属性可以直接添加到组件中。

例如

<Box height="100px" >... </Box> is same as 
<Box sx={{height: '100px'}}>...</Box>

https://mui.com/system/the-sx-prop/

【讨论】：