Material UI Chip文本超出背景及DataGrid响应式禁用与横向滚动求助

问题1：Chip组件文本换行后超出背景范围 #

移动端宽度不足时，Chip多行文本会超出背景色范围，核心原因是默认样式未适配多行内容的布局。可通过自定义样式解决：

• 直接使用sx属性调整样式，适配动态背景色需求：

import Chip from '@mui/material/Chip';

// 动态生成背景色的函数
const getChipBg = (status) => {
  switch(status) {
    case 'active': return '#4caf50';
    case 'pending': return '#ff9800';
    default: return '#f44336';
  }
};

<Chip
  label="这是一段会在移动端换行的超长标签文本内容"
  sx={{
    padding: '4px 8px',
    whiteSpace: 'normal',
    wordWrap: 'break-word',
    display: 'inline-flex', // 让背景容器跟随文本高度自适应
    backgroundColor: getChipBg(item.status),
    color: '#fff'
  }}
/>

• 若使用styled组件封装：

import { styled } from '@mui/material/styles';
import Chip from '@mui/material/Chip';

const StyledChip = styled(Chip)(({ bgColor }) => ({
  padding: '4px 8px',
  whiteSpace: 'normal',
  wordWrap: 'break-word',
  display: 'inline-flex',
  backgroundColor: bgColor,
  color: '#fff'
}));

// 使用时传入动态背景色
<StyledChip label="超长换行标签" bgColor={getChipBg(item.status)} />

问题2：禁用DataGrid自动响应式，仅显示横向滚动条 #

要关闭自动列宽调整、响应式布局，强制显示横向滚动条，可通过以下配置实现：

• 核心配置+样式调整：

import DataGrid from '@mui/x-data-grid';

<DataGrid
  rows={rows}
  columns={columns}
  disableColumnAutoWidth // 禁用自动计算列宽
  sx={{
    overflowX: 'auto', // 开启横向滚动
    minWidth: 1200, // 设置最小宽度，根据列总宽度调整
    '& .MuiDataGrid-columnHeaders': {
      minWidth: 1200, // 同步表头最小宽度，避免错位
    }
  }}
/>

• 可选：给每列设置固定宽度，进一步控制布局：

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: '名称', width: 220 },
  { field: 'detail', headerName: '详情', width: 350 },
  // 其他列配置...
];

配置完成后，DataGrid不会自动适配屏幕宽度，当容器宽度小于内容总宽度时，将显示横向滚动条。

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