Ways to modify the height of Material UI header using custom styling

How can you customize the dimensions of the header in a Material-UI table, such as height and width?

<TableHead >
  <TableRow >
    <TableCell hover>Dessert (100g serving)</TableCell>
    <TableCell align="right">Calories</TableCell>
    <TableCell align="right">Fat&nbsp;(g)</TableCell>
    <TableCell align="right">Carbs&nbsp;(g)</TableCell>
    <TableCell align="right">Protein&nbsp;(g)</TableCell>
  </TableRow>
</TableHead>

I attempted to set the height using sx={{ height:'20px' }}, but it did not adjust the height as desired.

javascriptmaterial-ui

Answer №1

To customize the height of the TableHead component, you can use sx like this:

<TableHead sx={{height:"150px"}}>
        <TableRow >
            <TableCell hover>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
        </TableRow>
 </TableHead>

Answer №2

In order to personalize the appearance of the TableHead, you must target the MuiTableCell-head class within the Table.

An important note to keep in mind is that the height of Mui TableHead does not come from the height property, but rather from the line-height. Refer to the example below for clarification:

 import { Table, TableHead, TableBody } from '@mui/material'


 <Table sx={{ '& .MuiTableCell-head':{ lineHeight: 20, color: 'red' } }}>

      <TableHead>
      </TableHead>

      <TableBody>
      </TableBody>

  </Table>

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

Having trouble turning off a multi-select drop down option

Hello, I'm a newcomer to AngularJs and facing an issue with disabling my multiselect dropdown under a specific condition. Initially, I attempted to disable the dropdown using the following code: document.getElementById("multidropdown").disabled = tr ...

javascripthtmlangularjsdrop-down-menu

Is there a way to update the background dynamically?

I'm currently developing a weather application and I want the background to change dynamically based on the data retrieved from an API. Initially, I set up a variable and utilized an if statement for this purpose. However, I encountered difficulty in ...

javascriptreactjs

Ways to present a Nuxt page as a reply from an express route

How can I achieve a similar functionality to res.render on a Nuxt page? The project is using the nuxt-express template, which combines Nuxt and Expressjs. Although Nuxt provides nuxt.render(req, res) and nuxt.renderRoute, I am having trouble making it wo ...

javascriptnode.jsexpressvue.jsnuxt.js

Tips for updating the contents of a div dynamically in JavaScript/jQuery without the need for clicking a button or a link

Is there a way to automatically reload or refresh the content of a specific div element without refreshing the entire page, and without any user interaction such as clicking a button or link? I am looking to update the div with the id 'div_graph' ...

javascriptphpjqueryhtml

Troubleshooting connection timeouts between node.js and amqp

In my project, I am utilizing RabbitMQ through the AMQP module in Node.js with 2 producers and 2 consumers. Here is the code snippet for establishing connections for the consumers: function init_consumers( ) { console.log( 'mq: consumers connect ...

javascriptnode.jsrabbitmqamqp

Tips for accessing req.fields variables while utilizing Express-Formidable

For some reason, I am encountering difficulties when trying to access variables parsed within req.fields using Express-Formidable. Upon executing a console.log() of req.fields, the output is as follows: { 'registration[username]': '1', ...

javascriptexpressformidable

Trouble arises when the properties of this.props are supposed to exist, yet they are not

Wow, what a name. I am struggling to come up with a better title given my current state. The problem at hand is as follows: When using React, I set the state to null during componentWillMount. This state is then updated after data is fetched from a serve ...

javascriptajaxreactjs

Error: An unexpected token '<' was encountered during the React Webpack build process

My ReactJs project is using Webpack4 and @babel/core 7. However, when I attempt to build the project, I encounter the following error in the terminal: ERROR in ./src/views/Pages/Login/Login.js Module build failed (from ./node_modules/babel-loader/lib ...

javascriptreactjswebpackbabeljs

The AJAX validation process fails to run prior to the execution of the login PHP script

My attempt to implement AJAX for form validation is not successful and I'm unsure why. Despite my efforts, the form still redirects to login_action.php instead of performing the AJAX validation as intended. I have designed a modal login form and wish ...

javascriptphpajax

`The functionality of parent.location is not operating as expected in Firefox and Chrome, however, it is functioning

Issue with JSP: <A NAME="CustomerInformation"></A> <table class="SectionHeader1"> <TBODY>enter code here <tr> <td>Customer Information</td> </tr> </TBODY> </table ...

javascriptjsp

Implement a function that runs upon Page Load using Javascript

Here is some Javascript code that loads a map with different regions. When you hover or click on a country, additional information about that country is displayed on the right side of the map. I would like to have a random country already displaying infor ...

javascriptjquerycsspageloadregion

I feel overwhelmed and confused by Node, Express, domains, and uncaught exceptions

After hours of research on exception handling in Node, I've come to understand the drawbacks of using uncaughtException. It's clear that shutting down the process can prevent any potential "unknown state" scenarios where anything may happen. The ...

javascriptnode.jsexpresserror-handlingnode.js-domains

Exploring an array of JSON data with HandlebarsJS and BackboneJS

My goal is to showcase a collection of music artists organized by the first letter of their name. This is how I have set up my Backbone View: function (App, Backbone, utils) { // Define a new module. var AllArtists = App.module(); // Create ...

javascriptjsonbackbone.jshandlebars.js

Unable to use the .focus() method on a Link component by utilizing references in React Router 4

I am currently working with the Link component in react-router (v4). I have successfully attached a ref to this component and can log the reference. However, when I try to use linkRef.current.focus(), I encounter the following error: linkRef.current.focu ...

javascriptreactjsreact-router-v4

Does the entire state get replaced every time a change is made if the state is immutable?

Is it necessary to replace the entire state if it is immutable? Otherwise, wouldn't mutating the state occur? Are top-level keys maintained as distinct immutable objects? Wouldn't changing anything necessitate replacing the entire state by defin ...

javascriptreactjsredux

Managing images in JavaScript while conserving memory

Welcome I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px. My vision involves creating a captivating visual experience for users as t ...

javascriptjqueryhtmlcssoptimization

Fetching text box value that has already been assigned dynamically using JavaScript

I created a PHP form that looks like this: <?php $txtVal1 = "value1"; ?> <script type="text/javascript"> function post_data(){ alert(document.getElementById("text1").value); } </script> <form method="post" action=""> <in ...

phpjavascript

Utilizing AngularJS to show content based on regular expressions using ng-show

With two images available, I need to display one image at a time based on an input regex pattern. Here is the code snippet: <input type="password" ng-model="password" placeholder="Enter Password"/> <img src="../close.png" ng-show="password != [ ...

javascriptangularjshtml

Diving into Discord.JS - Is there a way to check if a specific message content exists within an array?

I'm currently working on developing a Discord user verification bot that generates a 2048-bit key upon joining a server. This key will be crucial for verifying your account in case it gets compromised or stolen, ensuring that the new account belongs t ...

javascriptarraysnode.jsdiscorddiscord.js

Alternating row colors using CSS zebra striping after parsing XML with jQuery

After successfully parsing XML data into a table, I encountered an issue with applying zebra stripe styling to the additional rows created through jQuery. Despite my efforts to troubleshoot the problem in my code, I remain perplexed. Below is a snippet of ...

javascriptjqueryhtmlcssxml