What is the best way to remove linear-gradient effects applied by a dark mode theme?

Why does MUI add random gradients to components, like in dark mode? Is there a way to disable this feature because it doesn't match the exact color I expected for my custom theme...

My Theme Options

export const themeOptions: ThemeOptions = {
palette: {
    mode: 'dark',
    primary: {
        main: '#00c9ff',
        light: '#6bfcff',
        dark: '#0079b1'
    },
    secondary: {
        main: '#ffb000',
        light: '#ffe24b',
        dark: '#c68100'
    },
    info: {
        main: '#00c9ff',
        light: '#6bfcff',
        dark: '#0079b1'
    },
    error: {
        main: '#FF4349',
        dark: '#c70032',
        light: '#ff7a75'
    },
    warning: {
        main: '#ff8500',
        dark: '#ea712f',
        light: '#ffb644'
    },
    success: {
        main: '#3da930',
        dark: '#2d7e24',
        light: '#73db60'
    },
    neutral: {
        main: '#64748B',
        contrastText: '#fff'
    }
}

https://i.sstatic.net/MnFnu.png

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

How to Toggle Expand and Collapse Feature for Material-UI Components in React

My table features expand and collapse functionality using material-ui, which is working perfectly. However, I am looking to update it so that only one expand/collapse section is open at a time when clicked. const InvoiceInfo = ({el}) => { const [open, ...

Tips for integrating Material UI with useRef

There seems to be an issue with the code, but I haven't been able to pinpoint exactly what it is. My question is: How do you properly use useRef with Material UI? I am attempting to create a login page. The code was functioning fine with the original ...

Adding an icon to the Autocomplete TextField in MUI v5 in Reactjs: A step-by-step guide

I created an autocomplete feature with the code below and attempted to display an icon after selecting each item, but unfortunately, it didn't work as expected! import { useState } from 'react' import { TextField,InputAdornment ,Autocomplete ...

What is the proper way to define an array of objects in TypeScript?

In search of a way to define a function that accepts an array of unspecified object types, known as "anonymous types." I want to enforce strict typing with TypeScript. The objects in the array all have properties like name, price, and description. bagTotal ...

Tips for effectively dividing a component's code into smaller sub-components

Within my component MyComp, there exists an extensive code that I wish to divide into 3 separate components. In envisioning the structure of MyComp, I am seeking general advice and a brief example in response: import React, { Component, Fragment } from & ...

CSS unable to modify the color of the switch in HTML code

I've been struggling to change the color of the Switch to yellow when it's turned on. Despite my attempts, I haven't been successful in doing so. Is it even possible to achieve this color change? <Switch size="small& ...

Error in Typescript/React: Unable to access the property 'MaxEmailLength' as it is undefined

I am facing an unusual problem with TypeScript. I have two static classes that are mutually referencing each other and causing issues. Class ValidationHelper (single file) import { ValidationErrors } from '../dictionary/ValidationErrors'; ex ...

Is that possible to prevent the use of the & symbol in Angular 4 HTTP requests?

Using an HTTP request to save data in my database. The code snippet I used is: const form = '&inputdata=' + myinput + '&rf_date=' + rf_date; return this.http.post(this.rootUrl, form, {headers : this.reqHeader}); In thi ...

What steps should I take to repair the anchor tag associated with the badge?

Below is the code I have written for incorporating the badge feature: <Tab label={ <Badge badgeContent={size} color="secondary" showZero className={classes.badge} anchorOrigin={{ ...

Obtain precise measurements of a modified image using the Sharp library

My Cloud Function successfully resizes images uploaded to Cloud Storage using Sharp. However, I am facing an issue with extracting metadata such as the exact height and width of the new image. I am contemplating creating a new function that utilizes diff ...

Updating border styles of outlined select component in Material UI

I am struggling to modify the default outline color of the Select component in Material UI. This is what I attempted but unfortunately, it did not yield the desired result: const useStyles = makeStyles(theme => ({ formControl: { margin: theme.spa ...

"Implementing conditional styling in React with Material-UI and custom

Is there a way to adjust the border radius of a card based on the proximity of the Typography element? Ideally, I would like the border radius of the card to be set to borderRadius: '4px 4px 4px 4px !important' when the Typography is close. < ...

what are some tips for making Material-Ui Chips editable?

I am striving to achieve a similar result like the 4th Example using ReactJS and Material-ui. I have created something different by overlapping two fields, one being a normal input shown on focus for text editing and the other a chips container displayed ...

Formik invoked `handleChange`, however, you omitted to provide an `id` or `name` attribute for your input field: undefined

I'm currently exploring the integration of Formik with a MaterialUI Select component. You can find my sandbox project here: https://codesandbox.io/s/lively-wind-75iliv?file=/src/App.tsx After selecting a new value from the dropdown list, I've n ...

Typescript: Removing signatures with a filter

I am encountering a TypeScript error stating that .filter has no signatures. I'm unsure of how to resolve this issue. interface IDevice { deviceId: string; deviceName?: string; } const joinRoom = ({ userId, deviceId, deviceName }: IRoomParams ...

The child selector in CSS targeting specifically created for Material UI

These are my current styles: const useStyles = makeStyles(theme => ({ root: { margin: 5 }, container: { backgroundColor: 'red' }, active: { // In this section, I'm attempting to target the 'container' class ...

Error: Module not found - Unable to locate 'dropzone'

Since migrating from Angular 4.4 to Angular 8.0, I encountered the following issue: ERROR in ./src/attributes/import/import.component.ts Module not found: Error: Can't resolve 'dropzone' in 'C:....\src\attributes\imp ...

What is the solution for resolving the error related to converting implicit any type to index type in TypeScript?

Can you help with fixing this issue? "How do I resolve the error: 'Element implicitly has an 'any' type because expression of type 'any' can't be used to index type?' " What could be causing this problem? Can you expla ...

The interconnectivity between ngAfterViewInit in Angular's LifeCycle and observables

enable.service.ts @Injectable({ providedIn: 'root' }) export class EnableService { isEnabled$ = from(this.client.init()).pipe( switchMap(() => this.client.getEnabled()), map(([enabled, isAdmin]) => ({enabled: true, isAdmin: fals ...

Tips on transferring information to the graphical user interface

Here is my code snippet: signup.post('/signup', urlendcodedParser, async(req: Request, res: Response) => { const username = req.body.username; const password = req.body.password; const age = req.body.age; const email = req ...