如何在 material table 中设置单元格编辑组件的样式？

Question

所以问题是我正在尝试使用 material-table 库创建一个 editable table 并且当我单击一个单元格以编辑它时内容，一个编辑组件出现在单元格上，我想根据 table 样式设置组件的样式，但不知道在哪里写 CSS 相同。

这是我的代码片段：

<MaterialTable 
                columns={columns} 
                data={rows} 
                icons={tableIcons}
                cellEditable={{
                    cellStyle:{
                      //tried applying styles here but didn't work...
                    }
                }}
                options={{
                    search:false,
                    padding:"dense",
                    paging:false,
                    addRowPosition:"first",
                    actionsColumnIndex:-1,
                    sorting:false,
                    exportButton:false,
                    rowStyle:{
                        fontSize:"10px",
                        padding:0,
                        textAlign:"center"
                    }  
                }}
                />

感谢任何帮助。

Answer 1

一般来说，大多数 UI 组件库都提供了一些方法来呈现您的自定义组件，MaterialTable 也是如此。

这里描述的有点模糊：https://material-table.com/#/docs/features/component-overriding

对于您的情况，这里有一个示例： https://material-table.com/#/docs/features/editable 点击自定义编辑组件示例，查看代码：

const [columns, setColumns] = useState([
    {
      title: 'Name', field: 'name',
      editComponent: props => (
        <input
          type="text"
          value={props.value}
          onChange={e => props.onChange(e.target.value)}
        />
      )
    },
....

如何在 material table 中设置单元格编辑组件的样式？

How to style the cell edit component in material table?

reactjs

material-table