如何根据屏幕大小更改react mui的DataGrid中的列大小

Question

我希望在所有屏幕(md，sx…(中，title列采用全行宽度的3/4，amount列采用全列宽度的1/4。这是代码：

import React from 'react'
const MyComponent = () => {
return (
<Box   sx={{height: { md: 450, xs: 350 }, width: '35%',}} >
<DataGrid
columns={[
{ field: 'title',},
{ field: 'amount'
}
]}
rows={[
{ id: 1, title: 'React', amount:'100' },
{ id: 2, title: 'MUI', amount:'-100' },
]}
/>
</Box>
)
}
export default MyComponent

Answer 1

请参阅此处：https://mui.com/x/react-data-grid/column-dimensions/

columns={[
{ field: 'title', flex: 3},
{ field: 'amount', flex: 1}
]}