Using the MUI library, implement a ternary operator to handle the PaddingLeft property

One of the challenges I am facing in my application is to dynamically change the paddingLeft of the container based on whether the side nav menu is selected open or closed.
I have a variable called open that indicates the current state of the side nav.

Approach I attempted:
In an attempt to solve this issue, I added a sx property while rendering the container to adjust the padding accordingly.

<Container maxWidth={false} className={classes.container} 
  sx = {{paddingLeft: open ? "theme.spacing(34)" : "theme.spacing(200)"}}>

Unfortunately, this approach did not work as expected; the padding is not getting applied.
I wonder if I am misunderstanding how to use the sx property, or if there is another way to achieve this using inline styles?

javascripthtmlcssreactjsmaterial-ui

Answer №1

theme is a prop that cannot be passed as a string with double quotes. Try using string interpolation instead.

<Container maxWidth={false} className={classes.container} 
  sx = {{paddingLeft: open ? `${theme.spacing(34)}` : `${theme.spacing(200)}`}}>

Alternatively, you can just remove the double quotes.

<Container maxWidth={false} className={classes.container} 
  sx = {{paddingLeft: open ? theme.spacing(34) : theme.spacing(200)}}>

Update: resolve undefined theme issue.

<Container maxWidth={false} className={classes.container} 
  sx = {{ paddingLeft: (theme) => open ? theme.spacing(34) : theme.spacing(200) }}>

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 accessing a downloaded zip file from a REST endpoint with FileSaver

Here is the code snippet for the backend download endpoint: ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(); ZipOutputStream zipOut = new ZipOutputStream(byteArrayOutputStream); for (Long id : ids) { // Retrieve the file using ...

reactjsspringfile-saver

Determining Field of View (FOV) for a perspective camera in ThreeJS following a browser window resize

After changing the size of the browser window, I'm trying to determine the correct Three.JS camera FOV. I have looked at several related questions, but haven't found a solution yet: How to calculate fov for the Perspective camera in three js? C ...

javascriptthree.js3dperspectivecamera

Is it possible to include npm scripts in the package.json file using the command line interface (CLI)?

Imagine being able to add scripts directly from the command line while working, rather than needing to navigate through files and add them manually. This would be incredibly convenient, especially for editing files with bash. I've looked through npm d ...

javascriptnpm

What is the process of transmitting an array of data from Angular to a controller?

Recently, I started using AngularJS alongside asp.net MVC 5. Within my Angular code, I have an array called $scope.selectedRooms = []; where I push items into it. I want to send the data from this array to the controller after checking certain conditions. ...

javascriptc#jqueryangularjsasp.net-mvc

Ensure that the distance between the text, text field, and button remains consistent

Click on this link Use CTRL + F to search for "check", then you will see: https://i.sstatic.net/i2zYK.png I would like it to be displayed like this as link2 https://i.sstatic.net/aahgq.png I have 4 requested changes below. 1) Change the font-size and ...

htmlcss

Example of voxel painting using THREE.js

As I delve into the world of THREE.js and explore various examples, one that caught my eye is the Voxel Painter example. My current challenge involves ensuring that whenever a new cube is created, the roll-over mesh always moves on top of the recently pla ...

javascriptthree.js

Is it possible to change the color of unchecked checkboxes using Material UI components?

The Checkbox element has a color property that alters its appearance when checked, but not when unchecked. Learn more here. <Checkbox color="default" /> <Checkbox color="primary" /> <Checkbox color="secondary" /> https://i. ...

material-ui

Alter the background-color of the parent div when an input is checked using CSS

.chk-circle { width: 8px; height: 8px; background: #afb0b5; border-radius: 100%; position: relative; float: left; margin-top: 4px; margin-right: 8px; } .chk-circle label { display: block; wi ...

htmlcss

Is it possible for the width of the table to exceed the width of the

I am working on creating a table that will have a varying number of cells in each row generated dynamically. My goal is to ensure that the width of the table exceeds the width of the page so that each cell's inner HTML content remains on a single line ...

javascripthtmlcss

Is it considered good or bad practice to use plain JavaScript objects in an AngularJS application?

Imagine needing a custom object that doesn't rely on AngularJS (such as a specific collection with unique functionalities). You could create it independently of AngularJS and simply use it in services/controllers. Alternatively, you could design it a ...

javascriptangularjs

Troubleshooting: Node.js and EJS throwing 404 Error on delete function

I am encountering an issue where I am successfully retrieving the project ID, but when the delete method is called, it results in a 404 error. The code used for this scenario is as follows: Front End <% for(var i=0; i<projects.length; i++) {%> ...

javascriptnode.jsmongodbejs

Angular 2 eliminates the need for nesting subscriptions

Is there a way to streamline nested subscriptions like the code snippet below? I want to extract values from the subscription for better organization, but using a global variable won't work because the subscription hasn't received the value yet. ...

javascriptangular

Alternative solution for :has selector in Firefox without relying on JavaScript

Currently I am building a small website for a friend and incorporating the :has pseudo class. However, Firefox does not support this feature by default, unless manually enabled. Are there any workarounds available in this case? I am creating a hamburger m ...

cssfirefoxpseudo-class

Is there a way for me to view the table and information on this website?

Currently, I am in the process of extracting specific data from a table on the following website: . To achieve this, I have opted to use Python along with selenium. The issue arises when attempting to extract the table using read_html() from pandas. Unfor ...

htmlpandasseleniumbeautifulsoupselenium-chromedriver

Cover a cube with a material using Three.js

After following the tutorial on creating a Cube with a texture, I encountered an issue where the texture repeated on every face of the cube. I am seeking a solution to use a single texture that 'wraps' around the cube. Is there a way to achieve t ...

javascriptcanvas3dthree.jscube

Activating Durandal's knockout click functionality

I am struggling and need some assistance. I have tried various solutions, but I can't seem to get the click event working when I try to delete a free day by clicking on the icon. The other click events are functioning correctly. Here is my code snippe ...

javascriptjqueryhtmlknockout.jsdurandal

What is the best way to switch between two icons using boot-strap and jQuery without the use of buttons?

Is there a way to make it so that clicking on the heart icon hides it and shows the filled heart icon instead using jQuery? I am struggling to figure out how to reference the other icon in my function. This is just a rough idea of what I want to achieve. ...

htmljquerycssbootstrap-4

How can I independently use the draggable and click features in KineticJS?

How can I implement both draggable and click functionalities on the same node in KineticJS? Currently, when I make an element draggable, a click event is also triggered after the drag. You can view the example in JSFiddle at http://jsfiddle.net/matobaa/LZ ...

javascripthtmlhtml5-canvasdraggablekineticjs

What are the most secure options for storing a JWT token?

1. First, the user will input their username and password to log in. 2. Once logged in successfully, the server will return a JWT token. 3. The token will be stored securely. 4. Each request will include the JWT token for authentication with the server. I ...

node.jsreactjsmongodbauthenticationjwt

Why aren't my buttons reflecting the customTheme I set?

How come the customTheme I've created is not being applied to my buttons in MUI 5? Can someone please spot where I'm going wrong and suggest a solution? import React from 'react'; import NavBar from './components/NavBar'; imp ...

reactjsmaterial-uimaterial-design