Стилизация элементов ввода create-row в таблице материалов

Question

Я хочу увеличить значение раскрывающегося списка «Место рождения» внутри Материала в reactjs

Я хочу немного что-то вроде этого, и я не знаю, где можно добавить css ширина кода: 60%; для этого выпадающего списка

Answer 1

Вы можете стилизовать эти элементы с помощью createMuiTheme библиотеки Material-UI:

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

Проблема начинается, когда вам нужно стилизовать указанный c ввод в указанной ячейке c, потому что Вы не можете управлять стилем / реквизитом этого элемента.
Решение довольно уродливое, но я не смог найти лучшего (по крайней мере для версии 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