Automatically adjust padding in nested lists with ReactJS and MaterialUI v1

How can I automatically add padding to nested lists that may vary in depth due to recursion?

Currently, my output looks like this:

https://i.stack.imgur.com/6anY9.png:

However, I would like it to look like this instead:

https://i.stack.imgur.com/dgSPB.png

When I apply nested styles, they remain consistent across all levels. I need the padding to increment with each subsequent level. Can anyone offer assistance? (All feedback is appreciated!)

The provided code snippet includes functions for rendering a tree structure using React and Material-UI components.

cssreactjstypescriptmaterial-uinested-lists

Answer №1

It's surprisingly easy to solve this issue. Just make a simple adjustment in the following line:

<Collapse component="li" in={true} timeout="auto" unmountOnExit>

Replace it with the following line:

<Collapse component="li" in={true} timeout="auto" unmountOnExit style={{paddingLeft: '16px'}}>

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

Uniform Image Sizes in Bootstrap Carousel (With One Exception)

I am encountering a JavaScript exception related to image size. I am trying to set a fixed size for the images in my carousel, allowing them to auto adjust or resize without concern for distortion or pixelation. I have experimented with max-width and widt ...

javascriptcssimagetwitter-bootstrapautoresize

Tips for altering the font family in Next JS in conjunction with Material UI

I am currently exploring Next JS and using Material UI for styling. One issue I have encountered pertains to changing the font family without success. In an attempt to modify the font, as demonstrated in the example provided by Material UI on Github, I cre ...

material-uinext.js

Unable to extract the 'id' property from 'params' object in Next.js 13.4 due to its undefined value

I am currently trying to retrieve the [id] URL parameter in Next.js 13.4, but I keep encountering an error stating that params is undefined. Despite extensive online research and seeking assistance from ChatGPT, all I could find were examples for older ve ...

javascriptreactjsnext.js

Tips on preventing image previews from consuming too much text data while updating a database in Angular 12 using Material UI for image uploads within a FormGroup object

Currently working with Angular 12 and Angular Material for image uploads with preview. I have a formgroup object below, but I'm running into issues with the 197kb image preview text being inserted into the database. Despite trying setValue/patchValue/ ...

typescriptangular-materialangular12

What is the process to launch Docusaurus as a service on a Linux system, specifically Ubuntu?

Hey there! I'm currently trying to set up Docusaurus V2 as a service on Ubuntu headless. Right now, I have a temporary script in my Docusaurus folder that works when I start it with ./start.sh: /var/www/citro-docs-2/start.sh #!/bin/bash npm run serv ...

node.jsreactjslinuxservicedocusaurus

The navigation bar triggers the opening of all icon menus in their designated positions at the same time

This code snippet represents the navigation bar for an admin user, featuring 3 icons: navigation menu, user menu, and manage button icons. The problem arises when clicking on any of these icons, as all dropdown items from each icon are displayed in their ...

htmlreactjsmaterial-uinavbar

Here's how you can transfer the AceEditor value to the component state in ReactJS by utilizing the onClick event of a button

I'm facing a challenge implementing a customized CodeMirror using ACE Editor. I've experimented with incorporating state alongside the 'onClick' button parameter, but I haven't been successful in making it functional. import Rea ...

reactjstypescriptmaterial-uiace-editor

Tips for integrating a hubspot form into a Next JS component

I've been attempting to integrate a HubSpot form into a Next.js component without success so far. I followed the guidelines mentioned here, but have yet to figure it out. Where exactly should I place the embed code? As a newcomer to the realms of Rea ...

reactjsformsnext.jshubspotapp-router

Having trouble bringing in components to my pages in ReactJS

There seems to be an issue preventing me from importing the components onto the page, resulting in this error: ERROR in ./src/pages/Home.jsx 4:0-37 Module not found: Error: Can't resolve './components/Card' in '/home/c4p1/blog/src/pages ...

javascriptreactjsreact-native

Error message occurs when MUI components return Uncaught TypeError

Hi there, I would really appreciate some help. I'm currently working on a react project using MUI and encountering an issue where certain components are not functioning correctly, resulting in an Uncaught TypeError error message. Could someone assist ...

reactjsmaterial-ui

The positioning of the input element within the div is set to

Currently, I have a container div for textbox (div.tb) with position:relative. Inside this div, there are input and placeholder divs, both of which have position:absolute. The issue lies in the fact that while the input text is vertically centered, the pl ...

htmlcssposition

Sluggish operation of the personalized element

I have developed a unique text input component using Material UI and integrated it with Formik: import React from 'react'; import { Field } from 'formik'; import { TextField, ThemeProvider, createTheme } from '@mui/mate ...

reactjsmaterial-uiformik

Getting an error that reads, "Unable to read properties of null (reading 'uid')," but surprisingly, the application continues to function properly

After logging out, I encounter the following error: (Uncaught TypeError: Cannot read properties of null (reading 'uid')). However, my application functions as intended. During the logout process, I delete an API access token from the user docume ...

javascriptreactjsfirebasenext.js

Discover the magic of observing prop changes in Vue Composition API / Vue 3!

Exploring the Vue Composition API RFC Reference site, it's easy to find various uses of the watch module, but there is a lack of examples on how to watch component props. This crucial information is not highlighted on the main page of Vue Composition ...

javascripttypescriptvue.jsvuejs3vue-composition-api

Error: Angular2 RC5 | Router unable to find any matching routes

I am currently encountering an issue with my setup using Angular 2 - RC5 and router 3.0.0 RC1. Despite searching for a solution, I have not been able to find one that resolves the problem. Within my component structure, I have a "BasicContentComponent" whi ...

javascriptangulartypescriptmodulerouter

Using the useContext hook in a TypeScript class component: a step-by-step guide

I am working with a TypeScript class component and have successfully created a context that can be accessed globally. I am interested in learning how to implement this context in a .ts class component and if it is possible to use it in a pure TypeScript ...

reactjstypescriptreact-context

Editing the dimensions of the input in Bootstrap 4

Is there a way to adjust the width of the input and select elements? I want the input element to take up more space while the select element occupies less space. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel=" ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Guide on showing the content of an uploaded file as an object in JavaScript using file reader

When using the file upload function to upload a json file and read its contents, I am encountering an issue where the result is in string format instead of object. How can I display it as an object? Here is my code: .html <div class="form-group"> ...

javascriptangulartypescript

Are the nav, footer, header tags not functioning correctly?

Hi everyone, I'm a newcomer to StackOverFlow! I have a question about the necessity of tags like Nav, footer, header, etc. Do they serve any purpose other than indicating what each section is about? I've heard they might be good for SEO rankings ...

htmlcsstagsnavbarsemantics

Utilize a generic approach for every element within a union: Transforming from Some<1 | 2 | 3> to individual Some<1>, Some<2>, or Some<3> instances

As I was unable to create a concise example for my issue, this is a general rendition of it. I am facing a scenario where the "sequence of application" is vital in nested generics. type Some<A> = {type: A} type Union1 = Some<1 | 2 | 3> type Uni ...

typescripttypescript-generics