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.

cssreactjsmaterial-ui

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

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 №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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for making Material-UI Drawer indicate the active page?

Currently in the process of designing a website using Material-UI's drawer component. It is functioning as intended, directing me to the correct pages when I click on the Drawer Items. However, I am looking for a way to highlight the individual Drawer ...

reactjsreact-routermaterial-uimaterial-designreact-router-v4

Fluid and static containers in Bootstrap offer flexible and fixed-width layout

I am experimenting with combining fluid containers and fixed containers within a single page layout using Bootstrap. For example, I want to have a large image as a hero unit that spans 100% of the width and height of the viewport, or three column images e ...

htmlcsstwitter-bootstrap

Floating layout featuring a static width and a single element that expands

I am looking to create a layout with the following structure: Prefix - Input(Type: Text, Number,..) - Suffix - Button ul { list-style: none; width: 300px; margin: 0; padding: 0; } li { margin: 0; padding: 0; } table { margi ...

htmlcss

Strapi's URL for password recovery at '/forgot-password' is resulting in an error code 400

I'm encountering an issue while trying to set up the password recovery feature on my strapi application. Despite following the documentation instructions, the network request using the code below: axios.post('http://localhost:1337/auth/forgot-pa ...

node.jsreactjsstrapi

React Router will not remount the component when using this.context.router.push

We have implemented a click handler that utilizes react router 2.0 to update the URL with this.context.router.push(). Here is the code snippet: selectRelatedJob(slug) { JobActionCreators.fetchJobPage(slug); JobsActionCreators.getRelatedJobs({'sl& ...

javascriptreactjsreact-router

React Router - Implementing a <Redirect> element rather than a list of child components

Here is the code snippet I am working with: import { Redirect } from 'react-router-dom'; import QPContent from '../QPContent'; class AnswerContainer extends Component { constructor(props) { super(props); this.state = { ...

javascriptreactjsreact-router

Is it possible to transfer data between pages by utilizing state in the Next.js 13 App directory?

Can Nextjs 13 App Router be used to efficiently pass previewData from MainComponent.jsx to Preview.jsx as a State, without involving query parameters or props? I want to transfer the data as state from MainComponent.jsx, then navigate to the Result.jsx com ...

reactjsnext.jsnext.js13nextjs-dynamic-routingnextjs-app-beta

PNG file unable to display in Google Chrome

I created an image using paint.net and saved it as a .png file. However, when I try to display the image on my website, only the borders show up without any image content. Here is the code I used: HTML <a href="home.php"><img id="logo" src="../i ...

htmlcssimage

Navigating, rendering, and redirecting using react-router-dom

Recently, I inherited a React project from a coworker and as I delved into the code provided below, I found myself perplexed by its logic. content = <Switch> <Route path="/login" exact component={LoginPage} /> <Route r ...

reactjsreact-router-dom

What could be causing a syntax error when I use `npm run start` with npm react-scripts?

After months of working on a full stack React app, I encountered an unexpected error when trying to run npm run start from the command line. The error message was as follows: // npm run start > [email protected] start /Users/eden/Documents/GitH ...

javascriptreactjsnpmnpm-startreact-scripts

Highlighting Navbar Items

Can anyone provide advice on how to highlight a navbar item when clicked? I'm unsure if I should use Angular or CSS for this. Any guidance would be greatly appreciated. <div class="collapse navbar-collapse" id="navbarNav"> <ul class ...

cssangularbootstrap-4angular-ui-bootstrap

Having trouble getting a div to slide to the left on hover and collapse on mouseout using Jquery?

Hey there! I need some assistance in completing this code snippet. I have a div with overflow:hidden and a margin-left of 82px. Inside it, there is a share link and a ul list containing three external links. When I hover over the share link, everything w ...

javascriptjquerycsshoveronmouseover

Issue with loading TopoJSON data into React's simple maps library

I've been following the tutorial for react-simple-maps npm documentation in order to set up a map and experiment with it. The code snippet I'm using is from the usage section at the provided link: https://www.npmjs.com/package/react-simple-ma ...

jsonreactjs

I'm trying to figure out how to effectively interpolate a Link component within a text that shifts its position using Next-i18next/React i18next

Currently, I am utilizing Next.js with Next-i18next for internationalization. However, I have noticed that the React/i18next setup is essentially the same. My issue arises when I need to inject a Next Link component within translated text. The challenge l ...

reactjsnext.jsinterpolationi18nextreact-i18next

When trying to access a string value for an ID, I encountered an error stating "Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)"

Currently, I am working on a project using React and Typescript. My goal is to retrieve a specific string with the key name id from an array of ten objects that contain the id. The screenshot displaying the code produces the desired output in the console; ...

reactjstypescript

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

htmlcssangularangular-material

Unveiling the steps to automatically conceal a submitted form in React, no longer requiring the manual activation of a toggle button

Currently, I have a list of songs and a toggle button that reveals a form to add a new song. However, I want the form to hide automatically after submission without requiring another button click. I tried using useEffect but couldn't get it to work. A ...

javascriptreactjsformsexpresshide

The side menu in Bootstrap dropdown experiences a one-time functionality

When navigating through a responsive top menu with Bootstrap, everything works seamlessly - from toggling the menu to dropdown functionality. However, I encountered an issue with the side menu as nav-pills used to select tab-panes. <div class="containe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Following the modification of the Context root, the JSP page is no longer functioning as expected

Recently, I developed a JSP page within the webapp that utilizes jquery, CSS, and Angular JS. The files jquery-1.12.0.js, angular.min.js, and TableCSSCode.css are all located in the same directory as the JSP page. Initially, my application context was set ...

jquerycssangularjsjspweb

Content displayed in the center of a modal

Struggling to center the captcha when clicking the submit button. Check out the provided jsfiddle for more details. https://jsfiddle.net/rzant4kb/ <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class=" ...

javascripthtmlcssbootstrap-5