如何在ReactJs中用矩形框包裹组件？Material UI Box仅渲染文本怎么解决

你当前给Box组件配置的sx属性仅定义了响应式宽度规则，没有设置边框、背景、内边距这类可以让框体可视化的样式，所以页面只会渲染内部文本，看不到外框效果。

修正后的代码参考如下：

import * as React from 'react';
import Box from '@mui/material/Box';

export default function BreakpointsAsArray() {
  return (
    <div>
      <Box 
        sx={{ 
          width: [100, 200, 300],
          // 以下为框体可视化样式，参数可按需调整
          border: '1px solid #1976d2',
          borderRadius: 1,
          padding: 2,
          bgcolor: '#f5f5f5'
        }}
      >
        This box has a responsive width.
      </Box>
    </div>
  );
}

• 你写的数组格式宽度是MUI内置的断点简写规则，会自动对应xs、sm、md三个断点下的宽度，原本的响应式逻辑没有问题
• 如果需要更贴合预期的设计效果，可以按需调整边框粗细、颜色、背景色，也可以新增boxShadow属性给框体添加阴影

内容的提问来源于stack exchange，提问作者steven