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

Utilize the power of REACT JS to transform a specific segment within a paragraph into a hyperlink. Take advantage of the click event on that hyperlink to execute an API request prior to

In React JSX, I'm encountering an issue trying to dynamically convert a section of text into an anchor tag. Additionally, upon clicking the anchor tag, I need to make an API call before redirecting it to the requested page. Despite my attempts, I have ...

javascriptreactjs

How to Overlay a Semi-Transparent Object on a Background Video using CSS and HTML

Hey there, I'm encountering a puzzling issue with my website. I have a background video set up, and I wanted to overlay a floating textbox on top of it. However, no matter what I do, the background color and borders of the textbox seem to be hiding be ...

htmlcss

React Router V6: Route not found

Running into an issue with setting up basic routing in my project. Whenever I try to go to the Drug link, I receive a "Cannot GET {route}" error message. Not quite sure why this is happening, so any insights on what needs to be changed would be greatly app ...

reactjswebpackreact-routerwebpack-dev-server

The Material-ui Google Maps Place Component is unable to retain the text input when inserted into my personalized function

Seeking help with a React/NextJS/Material-UI issue. I am using the Material-ui Google Maps Place component but it's not working as expected when wrapped inside a custom function called HideOnScroll. The component works fine outside of this function, b ...

reactjsmaterial-uinext.js

Step-by-step guide on incorporating HTML into a popover within Angular4

After successfully implementing a hover popover in Angular using PopoverModule from ngx-popover, I now need to modify the content inside the popover. My search led me to this example: <ng-template #popContent>Hello, <b& ...

angulartypescripthoverpopover

Unexpectedly, IOS has a tendency to take away focus from the initial input element

Currently developing a React/Material-UI project with a set of forms. The autofocus HTML attribute is functioning correctly; however, upon loading the page, the focus is mysteriously shifted from the first text field to somewhere in the middle. This has ...

iossafarimaterial-ui

Is the Angular Library tslib peer dependency necessary for library publication?

I have developed a library that does not directly import anything from tslib. Check out the library here Do we really need to maintain this peer dependency? If not, how can we remove it when generating the library build? I have also posted this question ...

javascriptangulartypescriptangular-cliangular-library

Using Html to differentiate input based on type

Looking for input on the code snippet below: <table class="details-table" *ngIf="animal && animaldata"> <tr *ngFor="let attribute of animaldata.Attributes"> <td class="details-property">{{ attribute.AttributeLabel }}& ...

angularhtmltypescript

HTML text not lining up with SVG text

Why is the positioning of SVG Text slightly off when compared to CSS text with the same settings? The alignment seems awkwardly offset. Any help in understanding this would be much appreciated! Even with x: 50% and the relevant text-anchor property set to ...

javascripthtmlreactjssvg

Steps to transfer extra files such as config/config.yaml to the .next directory

I have the following folder structure for my NextJS project: _posts/ components/ hooks/ config/ <--- includes config.yaml file for the server pages/ public/ .env.local ... yarn build successfully copies all dependencies except for the config/ folder. ...

javascriptnode.jstypescriptwebpacknext.js

Creating a custom style that exclusively targets TableCell elements within the Table body

I'm working on creating a unique table layout in react using material UI. The goal is to have the rows in the table display without lines separating them, except for the row between the table head and body. I've tried removing the bottom border f ...

reactjsmaterial-ui

Display elements that are unique to one array and not found in another array using React

I am working on a feature where users can select fruits from an array called fruits, and the selected fruits will be stored in another state array named user_fruits. Once a fruit is selected by a user, it should not be available for selection again. fruit ...

javascriptarraysreactjs

When hovering over the sidebar, it smoothly slides out. (ideally using only CSS)

I've been spending my free time working on a website, but I'm struggling to figure out how to create a navigation similar to the one featured on FontShop's site: . I want it so that when you hover over their logo (or in my case, a blank rect ...

jquerycssnavigationhover

When integrating MUIRichTextEditor into a redux form, the cursor consistently reverts back to the beginning of the text

Whenever I utilize MUIRichTextEditor as a redux form field, the store is updated by redux with each keystroke, triggering a re-render of my component. My intention is to set the new value of the MUIRichTextEditor component using the documented prop defau ...

reduxmaterial-uirich-text-editordraftjs

Discover the secret to efficiently validating multiple email addresses with a single validation schema field in Formik!

My customer form requires two pieces of information. Customer name Customer Emails (which can be multiple) Next to the email field, I have added an 'add' button that allows users to add more emails to the form. Now, I need to validate each emai ...

reactjsmaterial-uiformikemail-validationformik-material-ui

Move the scroll bar away from the scrollable div and reposition it on a different part of the page using CSS

Is it possible to use CSS to position the scrollbar of a div that takes up the left half of my page with overflow-y: scroll to be where the page scrollbar would normally be (far right side of the page)? I've experimented with the ::-webkit-scrollbar ...

htmlcssscrollscrollbar

Adjusting the timing of a scheduled meeting

Is there a way for me to update the time of a Subject within my service? I'm considering abstracting this function into a service: date: Date; setTime(hours: number, mins: number, secs: number): void { this.date.setHours(hours); this.date.s ...

javascriptangulartypescriptservice

My websocket server establishes successful connections with Postman, however, it seems to encounter difficulties when connecting with my React project

After setting up a WebSocket server using Python deployed in an EC2 container, I encountered an issue where connecting through Postman was successful, but attempting to connect via Websocket in React resulted in the following error message: WebSocket conn ...

pythonreactjsnext.jswebsocketserver

How can I incorporate pure CSS into MUI v5 without using any external tools or libraries?

Currently, my custom spinner utilizes keyframes in the following way: import { keyframes } from "@mui/system"; ... const keyframeSpinner = keyframes` 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} `; ... <Box sx={{ anima ...

material-ui

Display HTML in JavaScript without altering the Document Object Model

Is it possible to style a custom HTML tag called "location" without directly modifying the DOM? For instance, having <location loc-id="14" address="blah" zipcode="14" /> Would it be feasible to render it like this: <div class="location"> ...

javascriptjqueryhtmlcssdom