Discovering how to adjust the "border-spacing" in a React Material-UI Table to ensure each row is nicely separated

I am looking to create Material-UI Collapsi Table Rows with separate styling. Check out the link for more information: https://material-ui.com/components/tables/#CollapsibleTable.tsx

const theme = createMuiTheme({
  overrides: {
    MuiTable: {
      root: {
        borderCollapse: "separate",
        borderSpacing: "0 10px",
        marginTop: "-10px"
      }
    },
    MuiTableRow: {
      root: {
        borderRadius: 40,
        border: "2px solid",
        backgroundColor: "green",
      },
    },
  },
});

I want it to look similar to this image with spacing in between: https://i.stack.imgur.com/bOJmr.png

The recommended method is by setting the Theme, but I welcome any other suggestions.

cssreactjsmaterial-ui

Answer №1

Avoid using borderRadius on MuiTableRow and instead utilize first-child, last-child, and MuiTableCell.

MuiTableCell: {
          root: {
            backgroundColor: "#fff",
            paddingTop: 0,
            paddingBottom: 0,
            paddingLeft: "0.2rem",
            paddingRight: "0.2rem",
            borderBottom: 0,
            overflow: "hidden",
            textOverflow: "ellipsis",
            "&:first-child": {
              borderTopLeftRadius: "0.7rem",
              borderBottomLeftRadius: "0.7rem"
            },
            "&:last-child": {
              borderTopRightRadius: "0.7rem",
              borderBottomRightRadius: "0.7rem"
            }
          }
},

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 sending a function as a prop to a child component in React

Something odd is happening, I'm confident that the syntax is correct, but an error keeps popping up: Error: chooseMessage is not a function // MAIN COMPONENT import React, { useState } from 'react' export default function LayoutMain(prop ...

javascriptreactjsreact-propsreact-functional-component

Unique border-bottom width measurements available

Seeking assistance with a design challenge, further details are available in the screenshot I've provided. I am attempting to apply a unique border bottom style to or text, with specific width specifications that do not span the entire word length. ...

htmlcss

Folding without extending

My button has a div inside it with content. I've set it up so that when the div is clicked, the collapsed content expands. The hover effect changes color and pointer as expected. But for some reason, clicking on the div doesn't expand the content ...

javascripthtmlcss

Is it possible to use CSS and HTML to rotate a cube and expand its sides?

I am attempting to rotate the cube and expand its faces. I have experimented with the following code: .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cube-wrap { width: 40px; height: 40px; ...

htmlcss

React functional component fails to update upon form submission

I am currently working on developing a functional component using Redux hooks that allows the user to edit a note. Everything appears to be functioning correctly, but when I submit the form with changes, it reloads itself without any updates being made. It ...

reactjsformsreduxreact-redux

Are you getting a 403 Forbidden error from Keycloak when trying to access localhost:3000?

Currently in the process of developing a web application with ReactJS, it is being hosted on http://localhost:3000. To ensure security, all backend and web applications are protected by Keycloak. The Keycloak and backend service account are both running on ...

reactjskeycloak

Broken Mui Input - Full width with attributes for minimum and maximum values

I've created a sandbox to demonstrate an issue I came across that seems unbelievable, but it's happening. Here's the link: https://codesandbox.io/s/nifty-swanson-yxj4n2?file=/NumberField.js:1075-1097 The problem is simple - when both the ht ...

javascriptreactjsmaterial-ui

Forgetting a crucial step in the process of updating a static ReactJS website on Google Cloud Platform

Replacing the contents in the bucket associated with an app may not update the app as expected. I recently deployed a site where I created a bucket, a directory, and deployed a React app using commands like: gsutil rsync -r gs://bucket-name ./app-name T ...

reactjsgoogle-cloud-platformrsync

CSS with three columns: the middle column has a fixed size, while the right and left columns

I am attempting to create a 3 column layout with specific requirements: The middle column is fixed at a width of 660px The left and right columns should each take up half of the remaining space, but have a minimum width of 120px The middle div need ...

htmlcss

Unleashing the power of async/await in React: A comprehensive guide

Looking to simplify my code, I am interested in implementing async and await for the following code snippet. However, I am unsure of how to proceed. Any examples would be greatly appreciated. deletePost = (post) => { var post_id = post; try { ...

javascriptreactjs

What is the best approach to ensure I wait for the next-auth session before utilizing useQuery()?

My NextJS project utilizes NextAuth for session management and React Query for data retrieval on the front-end. However, currently, the useSession() function returns undefined while checking if the session is authenticated. This undefined value is then us ...

node.jsreactjsnext.jsreact-querynext-auth

Tips for preventing an element from scrolling horizontally along with the page body

This is the structure of my HTML: <div class='header-wrapper'> <div class='title'>Title</div> </div> <div class='some-wide-content'> </div> Let's imagine a scenario where the br ...

htmlcss

Having trouble changing my array state in react?

I'm having trouble understanding why my React state isn't updating with the following code: state = { popUpMessages:[] } popUpMessage(id,name) { console.log("id ",id,"name ",name) const addUserObject = { id, name }; const new ...

javascriptreactjs

Setting the dispatch type in Redux using Typescript

I'm new to typescript and I'm trying to figure out what type should be assigned to the dispatch function. Currently, I am using 'any', but is there a way to map all actions to it? Here's how my code looks like: interface PropType ...

reactjstypescriptreduxreact-redux

A beginner's guide to retrieving random names and images from JSON data for every object using JavaScript

I have a creative idea for a random ruffling game, where it picks a user's name and image randomly. However, I'm facing an issue with ensuring that each image matches the correct user when selected randomly. I want to make sure that every objec ...

javascripthtmlcssarraysjson

encountering an issue with the react hook useHistory leading to an error

I recently encountered an issue while implementing useHistory() in my code. Previously, I had used it without any errors, but now I'm getting the following error in this component: Line 6:18: React Hook "useHistory" is called in function "showPost" ...

javascriptreactjsreact-hooksreact-router-dom

When using local state to set the results of an RTK query within useEffect, you may encounter a warning stating that the maximum

My goal is to update the local state with the results from an RTK query in order to dynamically change a list based on user interactions. The crucial code snippets are: const { data: notifications = [], isLoading, isError } = useGetUserNotificationsQuery() ...

reactjsreact-hooksrtk-query

Concealing the ellipsis in the will_paginate function of Rails

I'm currently utilizing will_paginate to manage a large number of values, but I am struggling to find a way to hide the "..." portion and the page numbers following it. Here is my current setup: https://i.stack.imgur.com/f2Tt8.jpg However, what I wou ...

htmlcssruby-on-rails

What could be causing my hover effect to function exclusively on Chromium-based browsers and not on Firefox?

Could use some help with this code snippet .podmenu { display: flex; flex-direction: column; list-style: none; width: 10rem; margin-left: 3rem; margin-bottom: 60px; } .verze { list-style: none; flex-direction: column; ...

htmlcss

How can you reach a constant from a different component in React?

I am new to developing a react application and struggling with accessing const data from another component. The specific constant I need access to is located in the TableComponent.js file. TableComponent.js export default function({ infinite }) { const [ ...

javascriptreactjs