Как заставить реагирующий компонент сидеть поверх другого компонента

Question

Я работаю с таблицей, в которой есть возможность развернуть больше, чтобы включить больше деталей для каждой указанной строки c. Я использую ползунок, чтобы развернуть таблицу. В настоящее время мой ExpandToggle компонент находится в столбцах таблицы, которая расширяет таблицу влево и выталкивает данные. Вместо этого я хотел бы, чтобы мой компонент ExpandToggle покрывал строки Fat(g) Carbs(g) и Protein(g) и располагался поверх таблицы, а не отображал данные этих 3 строк вместо растяжения таблицы.

Я создал codesandbox , чтобы показать, с чем именно я работаю.

То, что в данный момент отображается:

Код тела таблицы:

<TableBody>
          {rows.map(row => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
              <TableCell align="right">
                <ExpandToggle />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>

Answer 1

Как уже упоминалось в @Aditya, вы должны переопределить стили для компонента SliderInfo, реализовать что-то вроде подсказки (используйте свойство position), как показано ниже
SliderInfo. js

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: "#E2F1F1",
    position: "absolute",
    bottom: "0",
    left: "-360%",
    height: "100%",
    width: "400%"
  },
  listItem: {
    divider: true
  }
}));

demo. js

const useStyles = makeStyles({
  table: {
    minWidth: 650
  },
  cc: { position: "relative" }
});

 <TableCell
                classes={{
                  root: classes.cc
                }}
                align="right"
              >
                <ExpandToggle />
              </TableCell>

просто как идея, песочница

Answer 2

Вам необходимо переопределить стили для этого компонента MuiTableCell и className равно MuiTableCell-root. Есть несколько способов настроить компонент MaterialUI, подробные документы можно найти здесь https://material-ui.com/customization/components/. Дайте мне знать, если вам нужна помощь.