Personalize the styling of Material UI Tables - final element customization

Question

Personalize the styling of Material UI Tables - final element customization

I've been attempting to adjust the padding of the Material UI Table. The last-child element is receiving a 24px padding which I'm trying to modify. Despite my attempts at overriding the theme and using classes{{root: classes.xxx}}, I haven't been successful in making the change.

Here is the code snippet I used to override the theme (I also tried overriding MuiTableRow and MuiTableColumn):

const theme = createMuiTheme({
  overrides: {
    MuiTableCell: {
      root: {
        paddingTop: 4,
        paddingBottom: 4,
        '&  $lastChild': { paddingRight: '5px' },
      },
      paddingDefault: {
        padding: '40px 12px 40px 16px',
      },
    },
  },
});

This is the CSS rule I'm looking to modify (applies to the last cell of each row in the table):

.MuiTableCell-root-511:last-child {
    padding-right: 24px;
}

Any assistance would be greatly appreciated.

css reactjs material-ui

Answer 1

Answer №1

Well done, you're on the right track, but there are a few syntax errors in your JSS code.

The correct last child selector should look like this:

'&:last-child': {}

Here is a complete example for you to refer to:

const theme = createMuiTheme({
  overrides: {
    MuiTableCell: {
      root: {
        paddingTop: 4,
        paddingBottom: 4,
        "&:last-child": {
          paddingRight: 5
        }
      }
    }
  }
});

https://codesandbox.io/s/3x90612225

Answer 2

Well done, you're on the right track, but there are a few syntax errors in your JSS code.

The correct last child selector should look like this:

'&:last-child': {}

Here is a complete example for you to refer to:

const theme = createMuiTheme({
  overrides: {
    MuiTableCell: {
      root: {
        paddingTop: 4,
        paddingBottom: 4,
        "&:last-child": {
          paddingRight: 5
        }
      }
    }
  }
});

https://codesandbox.io/s/3x90612225

Answer 3

Answer №2

If you prefer not to override the theme directly, you can still achieve the same outcome by using the classes object prop in the following manner here.

const useStyles = makeStyles({
  cell: {
    '&:last-child': {
      paddingRight: 5,
    },
  },
});

Simply apply it to your TableCell as usual;

<TableCell className={classes.cell}>

This approach will effectively alter the &:last-child attribute of your cell. I personally find this method more convenient especially when I only need to change a specific aspect of the theme.

Answer 4

If you prefer not to override the theme directly, you can still achieve the same outcome by using the classes object prop in the following manner here.

const useStyles = makeStyles({
  cell: {
    '&:last-child': {
      paddingRight: 5,
    },
  },
});

Simply apply it to your TableCell as usual;

<TableCell className={classes.cell}>

This approach will effectively alter the &:last-child attribute of your cell. I personally find this method more convenient especially when I only need to change a specific aspect of the theme.

Answer 5

Answer №3

In the latest version of Material-UI, MUI v5, you have the option to utilize the sx prop to target and style the last TableCell element in a table like so:

<Table
  sx={{
    '& .MuiTableCell-root:last-child': {
      bgcolor: 'pink',
    },
  }}
>

Alternatively, if you prefer to make global overrides using createTheme():

const theme = createTheme({
  components: {
    MuiTableCell: {
      styleOverrides: {
        root: {
          '&:last-child': {
            backgroundColor: 'tomato',
          },
        },
      },
    },
  },
});

Live Demo

https://codesandbox.io/s/52532361-customize-padding-material-ui-table-last-child-i4s3v?file=/demo.tsx

Answer 6

In the latest version of Material-UI, MUI v5, you have the option to utilize the sx prop to target and style the last TableCell element in a table like so:

<Table
  sx={{
    '& .MuiTableCell-root:last-child': {
      bgcolor: 'pink',
    },
  }}
>

Alternatively, if you prefer to make global overrides using createTheme():

const theme = createTheme({
  components: {
    MuiTableCell: {
      styleOverrides: {
        root: {
          '&:last-child': {
            backgroundColor: 'tomato',
          },
        },
      },
    },
  },
});

Live Demo

https://codesandbox.io/s/52532361-customize-padding-material-ui-table-last-child-i4s3v?file=/demo.tsx

Personalize the styling of Material UI Tables - final element customization

Answer №1

Answer №2

Answer №3

Live Demo

Similar questions

Is it possible to change the value of a react-final-form Field component using the onSelect function?

Hovering over an image with CSS for a cool effect - altering the background and text

What are the steps to generate a production build directory in a React project?

The MaterialTable is unable to display any data

Generating an array of objects based on a specified condition

What is the correct method for integrating third-party React components into a Kotlin.js project?

React TypeScript Context - problem with iterating through object

Working efficiently with query selectors in React using useRef

Expanding the <li> elements to create a wide horizontal navigation menu that fits within a 960 grid layout with 12 columns

Mapping the Way: Innovative Controls for Navigation

I am looking to remove all white spaces from my website's HTML code

Adaptable CSS triangle design

What causes the button size to change in Bootstrap when switching to a spinner?

``There seems to be a problem regarding the alignment of elements in

Tips on displaying inline span text within an anchor element, above the anchor text

Alignment of content layout across two wrapper elements

When removing the class "img-responsive" from an image, the bootstrap columns begin to overlap

The modal box should adjust its height to perfectly accommodate the content within

Ensure Focus Retention Upon Clicking Inside Iframe with li a:focus

NextJs Datepicker Component with React