Stuck with the Same Theme in the AppBar of material-UI?

Currently, I am attempting to modify the theme of a material-UI AppBar by utilizing states. Strangely enough, although the icons are changing, the theme itself is not.

If you'd like to take a look at the code, you can find it here: https://codesandbox.io/s/relaxed-bird-n30bg?file=/src/App.js

Answer №1

:)

Looks like there's a typo in App.js - the word palatte should actually be spelled as palette

const theme = createMuiTheme({
    palette: { //<---here
      type: themeMode,
      primary: {
        main: themeMode === "light" ? "#3f51b5" : "#333333"
      }
    }
  });

I've fixed the typo and everything seems to be working fine now.

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 difficulty retrieving the Area and Range information in ChartJS

I am new to working with HTML5 and ChartJS. I have noticed two different types of declarations when attaching JS Chart Versions 1.0.1 and 2.1.1. Can you please provide some insight into this? Additionally, I am facing an issue where the stripes behind the ...

Implementing CKEditor instances within AngularJS Controller scopes

Greetings everyone, Recently, I have been exploring Angular JS. Everything is going smoothly - my controllers, services, and so on. However, when attempting to make a Div editable that is within the ng-controller, the ckeditor toolbar fails to appear. On ...

Encounter an Internal Server Error while using Laravel 5.4

I am encountering an issue while attempting to implement ajax search in my laravel project. I have included the controller and JavaScript code related to this problem below. Can you please take a look and let me know what may be causing the error? pu ...

A method designed to accept an acronym as an argument and output the corresponding full name text

Having trouble with my current task - I've got an HTML file and external JS file, and I need a function that takes an element from the 'cities' array as input and returns a string to be used in populating a table. I've set up a functio ...

Encountering issues with running npx create-next-app@latest

Recently, I encountered a problem while trying to create a new Next.js app where I received an npm ERR! ENOTEMPTY: directory not empty error. You can view the screenshot of the issue below: Screenshot Surprisingly, this has been working perfectly for the ...

What could be the reason for the presence of three pixels of white space below this particular table

My table is supposed to have a fixed height of 146px, but there seems to be an extra row of three pixels at the bottom. I've tried various methods to remove any unwanted spacing or padding, but nothing has worked so far. The only solution I found was ...

Why isn't margin working with position: fixed?

I need help finding a solution for incorporating margin in a box within my App class. The issue is that the position fixed property doesn't seem to work as intended. <div className="App"> <div className="box"> ...

Tips for utilizing ng class within a loop

Having some trouble with my template that loops through a JSON file using json server. The issue I'm facing is related to correctly applying ng class when clicking on icons. Currently, when I click on an icon, it adds a SCSS class but applies it to al ...

React JS project experiencing issues with Material UI components not functioning properly

Here is a unique version of my app.js code: import React from "react"; import './App.css'; import {Button} from "@mui/material"; function App() { return ( <div className="App"> <h1>COVID-19 T ...

Transmit a set of binary information and efficiently store it on the server's end

In my current project, I am utilizing AJAX to transmit an array of images to a server and save them on the server end seamlessly. My primary goal is to achieve optimal efficiency in this process, and I have come to realize that my present approach may not ...

Encountering Nested CSS bugs while implementing Tailwind in a Next.js/React project

Just diving into the world of Next.js/React. I recently went through the Tailwind CSS for Next.js tutorial and successfully integrated Tailwind into my project by following these steps: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init - ...

What could be causing my React function to be declared but not utilized?

Struggling with my React project, I hit a roadblock when trying to import my generalInput file into my App file. The error message stated that the generalInput was declared but never read. Desperate for a solution, I even turned to AI for help, but it too ...

What is the best way to mock a Typescript interface or type definition?

In my current project, I am working with Typescript on an AngularJS 1.X application. I make use of various Javascript libraries for different functionalities. While unit testing my code, I am interested in stubbing some dependencies using the Typings (inte ...

The particles.js with absolute positioning is currently overlapping my div with relative positioning

Visit this link <div class="outer-container"> <div id="particles-js"> <div class="your-content"> <article id="3" class="bg-dusk transition md:group-hover:opacity-50 md:hover:opacity-important md:hov ...

How to dynamically update form select options using Zend Framework 2 (2.3) and AJAX

I'm facing an issue with concatenating 3 dynamic selects - state, country, city - using an ajax request. It seems more complex without zf2! The function works fine when $idState is manually set within stateCountryCityAction (e.g. $idState = 1;), but d ...

What is the proper way to add my image to CSS?

I'm encountering an issue while trying to insert my picture - I keep receiving a 404 error even though I believe my path is correct. Here are my files: main-menu phone.png _menu.scss Within my _menu.scss file, the following code is p ...

Creating unique image control buttons for each image within a div using a combination of CSS and JavaScript

How can I create image control buttons, such as close, resize, and rotate, for each individual image when hovering over it? Each image is contained within a draggable div. I want to display an image control button next to each image. This button should on ...

Navigating a vast code repository in Node.js

As I prepare to start a Node.js project with a sizable codebase, my aim is to keep my code isolated from the node_modules directory. I am keen on utilizing namespaces and organizing my code into folders for better management. However, it seems like I woul ...

Having trouble with JSON parsing in Promise execution

I am in the process of developing a Promise with the objective of adding up any numbers discovered within an array or JSON object. The add() function is designed to receive a series of URLs as a string input and calculate the total sum of those URLs. Her ...

When making a request through local apache, the POST method is switched to GET

I've been attempting to send a post request using the code below. However, the request is being sent as a GET instead of POST. How can I resolve this issue? $.ajax({ url: 'https://www.exampleurl.com', method: 'POST', h ...