在 Material Table 中设置 create-row 输入元素的样式答案

【问题标题】：Styling create-row input elements in Material Table在 Material Table 中设置 create-row 输入元素的样式
【发布时间】：2020-08-08 00:02:58
【问题描述】：

我想在 reactjs 的 Materialtable 中增加下拉列表“出生地”的使用

我想要这样的东西，但我不知道在哪里可以添加这个 css 代码宽度：60%；对于这个下拉列表

【问题讨论】：

标签： reactjs material-ui material-table

【解决方案1】：

您可以使用 material-ui 库的 createMuiTheme 设置这些元素的样式：

const theme = createMuiTheme({
  overrides: {
    MuiTableRow: {
      root: {
        "&[mode=add]": {
          "& .MuiInputBase-root": {
            width: "90%",
            background: '#dedede',
          }
        }
      }
    }
  }
});

当您需要在特定单元格中设置特定输入的样式时，问题就开始了，因为您无法控制该元素的样式/道具。
该解决方案非常难看，但我找不到更好的解决方案（至少对于 1.57.2 版本）：

const theme = createMuiTheme({
  overrides: {
    MuiTableRow: {
      root: {
        "&[mode=add]": {
          "& .MuiInputBase-root": {
            width: "90%",
            background: "#a1a1a1"
          },
          "& .MuiTableCell-body:nth-child(4)": {
            "& .MuiInputBase-root": {
              width: "100%",
              background: "#d1d1d1"
            }
          }
        }
      }
    }
  }
});

您可以在此处找到完整的工作示例：https://codesandbox.io/s/material-table-style-create-row-cbpzk?file=/demo.js

【讨论】：