Search code examples
reactjsmaterial-uimaterial-table

Styling create-row input elements in Material Table

i wan to increase the with of a drop-down list "Birth Place" inside the Materialtable in reactjs

enter image description here

i want some thing like that and i dont know where can add this css code width: 60%; for this drop downlist

enter image description here

Solution

  • You can style those elements with the createMuiTheme of the material-ui lib:

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

    The problem starts when you need to style specific input in specific cell, because you can't control style/props of that element.
    The solution is pretty ugly, but I couldn't find a better one (at least for version 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"
            }
          }
        }
      }
    }
  }
});

    You can find the complete working example here: https://codesandbox.io/s/material-table-style-create-row-cbpzk?file=/demo.js