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

What are the steps to resolve issues with my dropdown menu in IE9?

I have a cool CSS built hover-over drop-down menu that I want to add to my website. It works perfectly on all browsers except for IE9. Here is the code and stylesheet I am using: Check out the code and sheet here If anyone has any insights on what might ...

cssdrop-down-menuinternet-explorer-9

Changing a CSS block in IE7 using jQuery

Users have the ability to update the look of their customizable widget by editing CSS code in a textarea that automatically updates a <style> element when changed. Here is the JavaScript function: function updateWidgetStyling() { $("#stylePrevi ...

jquerycssinternet-explorer-7stylesdhtml

Adjusting the structure of React Native Flex:1 to optimize performance and organization

In the layout above, the red component should fill the entire screen and the button should be positioned at the bottom. `<SafeAreaView style={{flex: 1, backgroundColor: 'red'}}> //red component <TouchableOpacity //purple component ...

reactjsreact-nativeflexboxflex4

Retrieve the difference in time from the current moment using moment.js

I am trying to implement a functionality where I can track when my data was last updated. - After hitting the 'Update' button, it should display 'Update now' - If it has been n minutes since the update, it should show 'n mins ago& ...

javascriptreactjsmomentjs

Utilizing the Next.js "Link" Element as a Personalized React Component Using Typescript

When attempting to utilize the "Link" element as a custom react component that I modified with typescript to enhance its functionality, I encountered a recurring issue in my project. Each time I used it, I had to include a property named props which contai ...

reactjstypescriptnext.js

Is there a way to make placeholder text automatically adjust its size to fit within the text input element and display its complete content?

I am working on a piece of HTML code that includes a form with a table for traveler information. However, I am having trouble ensuring that the placeholder text remains fully visible at all times. To give you a visual example, here is what I currently hav ...

htmlcssplaceholder

Ensure that parameters are validated correctly in the Next.JS application router using the searchParams method

When building the page, I need to properly validate params in the Next.JS app router using searchParams. My goal is to show a main image (coverImage) for each photo on the /gallery page. When a photo is clicked, I want to display more photos of the same k ...

javascriptreactjstypescriptnext.jsnext.js13

Enhancing the Syntax of If and If Else in Jquery Functions

I'm struggling to simplify and optimize this block of code. Would appreciate any help in making it more efficient! var status = "closed"; $(document).on('click', '[data-toggle-nav]', function(event) { if ($(this) && status = ...

javascriptjqueryhtmlcss

The dropdown menu is unable to open directly below the main menu item

How can I make the submenu open to the left when hovering over a menu point, instead of directly under it? I have tried adjusting the position attributes but haven't found the right solution yet. The closest I got was by changing the display property ...

htmlcss

Leveraging Apollo GraphQL Client with ReactJS - Utilizing properties within a GraphQL query

I am working on a component that displays users associated with a specific type of entity. This component uses the apollo graphql compose helper for rendering. The export code for the component is structured like this: export const UsersContainer = compos ...

reactjsgraphqlapollo-client

What is the best way to duplicate a component while customizing certain attributes, such as text and images, in a different component within a

As a newcomer to coding and React, I appreciate your patience with me. I have developed a component that I intend to use in many different components. Here's how it currently looks: import React from 'react'; const Feature = () => ( ...

reactjs

Can simply adding Bootstrap CDN make a website responsive?

Is Bootstrap truly self-sufficient when it comes to responsive design, or do custom webpages utilizing Bootstrap require additional responsive instructions? If I incorporate the Bootstrap CDN and utilize its built-in components, can I assume the webpage ...

csshtmltwitter-bootstrapcdn

The Subcomponent for Children will remain static and not refresh

I am currently in the process of developing a Word Clock using React. However, I have encountered an issue where my child component fails to re-render even after receiving a new prop. To display the correct time, I am forced to refresh the page. Although I ...

reactjs

The navigation reducer isn't being invoked during navigation

I've been working on implementing nested navigation using reactnavigation by creating a reducer as shown below: import AppNavigation from '../Navigation/AppNavigation' export const reducer = (state, action) => { const newState = AppNa ...

reactjsreact-nativereact-reduxreact-navigation

Steps to create a typewriter effect using a collection of words

I managed to create a looping typewriter effect, but I'm facing an issue where the first word in the array is not being typed again after the first cycle. Additionally, I am seeing 'undefined' displayed after the last word before it repeats ...

javascriptreactjsnext.js

Is it possible to target elements within a UMAP iframe using CSS?

I have integrated a uMap map into my website. Here is the code: <iframe id="umapiframe" class="iframe-umap" width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/f ...

javascriptcssgoogle-mapsiframeselector

Ensure the hour field is accurate using yup validators

I am using material-ui's TextField component with a field labeled as "hour." I need to implement Yup validation to enforce a specific format for the input value, which should follow this pattern: 02:30 Can someone guide me on how to achieve this usin ...

reactjsmaterial-uiyup

The inability to destructure the 'store' property from the 'useReduxContext(...)' because of its null value

I am currently using NextJs 13 along with redux toolkit. Whenever I run the npm run build command, I encounter this error: "Cannot destructure property 'store' of 'useReduxContext(...)' as it is null." I suspect that the issue lies wi ...

reactjstypescriptnext.jsredux-toolkitnext.js13

Challenges with dropdown menus in the sub navigation area

I am currently working on a navigation system that includes three levels of sub-navigation elements. While the functionality is fine up to the third level, it only displays one subcategory instead of multiple categories as intended. I suspect there might ...

jqueryhtmlcssnavigation

An issue occurred during the building of the module (from ./node_modules/sass-loader/dist/cjs.js) and resulted in

Within the app directory, I've created a new folder called styles > custom > loader.scss. In the styles.scss file, I included the following import: @import "styles/custom/loader.scss"; However, upon doing so, an error message appeared ...

htmlcsssass