我可以在没有 Mui 主题的情况下使用 Mui 组件吗

Question

我有一个项目，我用

@emotion/styled

定义自己的主题。我想知道是否可以使用 Mui 组件之一，但无需使用

createTheme

从 Mui 定义主题。我想使用 Mui 的

Data-Grid

或

Material-React-Table

。当我尝试直接在我的项目中使用它时，我收到一个错误

Cannot read properties of undefined (reading 'mode')
    at getBorderColor (GridRootStyles.js:8:1)
    at GridRootStyles.js:158:1
    at processStyleArg (createStyled.js:66:1)
    at createStyled.js:172:1
    at handleInterpolation (emotion-serialize.browser.esm.js:139:1)
    at serializeStyles (emotion-serialize.browser.esm.js:264:1)
    at emotion-styled-base.browser.esm.js:123:39
    at emotion-element-c39617d8.browser.esm.js:38:1
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateForwardRef

Answer 1

是的，您可以使用 Material-UI (Mui) 组件，而无需创建 Mui 主题。但是，如果您不提供某些基本风格，您可能会遇到风格上的困难。

例如，如果您收到“无法读取未定义的属性（读取'mode'）”之类的错误，则可能是因为Mui组件需要具有某些属性的主题对象，例如用于管理亮/暗模式的'mode'。 您可以直接在组件或容器元素中提供基本样式。这是一个使用 Mui 的 DataGrid 组件的简单示例

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

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'firstName', headerName: 'First name', width: 150 },
  { field: 'lastName', headerName: 'Last name', width: 150 },
  { field: 'age', headerName: 'Age', type: 'number', width: 90 },
];

const rows = [
  // Your data rows here
];

function App() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
      />
    </div>
  );
}

export default App;