React-Admin的Button组件在移动端sm断点消失，如何使其全断点可见？

React-Admin的Button组件默认内置了响应式隐藏逻辑，会在sm（屏幕宽度≤600px）断点及以下自动隐藏，这是为适配移动端简化界面的设计，而原生MUI Button无此默认行为。可通过以下方式强制让它在所有断点显示：

方法一：直接通过sx属性覆盖样式 #

给React-Admin的Button添加sx属性，强制设置所有断点下的显示模式：

import { Button } from 'react-admin';
import { Info } from '@mui/icons-material';

<Button
  onClick={() => alert('Button RA')}
  label='Infos'
  startIcon={<Info />}
  sx={{ display: 'flex' }}
/>

方法二：全局修改主题样式 #

若需要让所有React-Admin Button都在移动端显示，可自定义MUI主题覆盖默认样式：

import { createTheme } from '@mui/material/styles';
import { ThemeProvider } from '@mui/material';
import { Admin } from 'react-admin';

const customTheme = createTheme({
  components: {
    RaButton: {
      styleOverrides: {
        root: {
          '@media (max-width: 600px)': {
            display: 'flex !important',
          },
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Admin /* 你的Admin配置 */>
        {/* 资源和路由配置 */}
      </Admin>
    </ThemeProvider>
  );
}

方法三：使用variant="text"（部分场景适用） #

React-Admin的text变体Button默认不会在移动端隐藏，若能接受文本按钮样式，可直接设置：

<Button
  onClick={() => alert('Button RA')}
  label='Infos'
  startIcon={<Info />}
  variant="text"
/>

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