Classname fails to modify the base style of the AppBar

Struggling to modify the appearance of the AppBar component by utilizing the className attribute, however, the .MuiAppBar-root class consistently takes precedence.

const useStyles = makeStyles((theme: Theme) => ({
  appBar: {
    backgroundColor: 'red',
    color: 'black',
    zIndex: theme.zIndex.drawer + 1
  },

const classes = useStyles();

...
<AppBar position='fixed' className={classes.appBar} >

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

Observing that .makeStyles-appBar-139 is being overridden by .MuiAppBar-colorPrimary for background-color and color, and by .MuiAppBar-root for z-index.

Attempted using classes as well:

<AppBar position='fixed' classes={{ root: styles.appBar }} >

Yet encountered the same issue.

Edit: Employing typescript in this context.

typescriptmaterial-ui

Answer №1

It appears that your CSS class "makeStyles-appBar" is being applied after the default "MuiAppBar-colorPrimary",

Here are a few solutions for your situation:

1. Use the style property

<AppBar position="fixed" style={{ color: 'black', z-index: 1201, background-color: 'red'}}>

2. Use !important in your CSS - not recommended

appBar: {
    backgroundColor: 'red !important',
    color: 'black !important',
    zIndex: (theme.zIndex.drawer + 1) + ' !important'
}

Reference - Transparent AppBar in material-ui (React)

https://material-ui.com/api/app-bar/

TypeScript - use decorators as shown below,

import * as React from 'react';
import { withStyles, WithStyles } from 'material-ui/styles';
import { StyledComponent } from 'material-ui';

type C = 'root' | 'foo';

interface P { options?: string[]; }

interface S { open: boolean; }

@withStyles((theme) => ({
  root: {},
  foo: {},
}))
class Component extends React.Component<P & WithStyles<C>, S> {
  render() {
    return (
      <div className={this.props.classes.root} />
    );
  }
}

export default Component as StyledComponent<P, C>; // type assertion

Without decorators

const SelectedMenu = withStyles(theme => ({
  root: {
    maxWidth: 360,
    width: '100%',
    backgroundColor: theme.palette.background.paper,
  },
}))<P>(class extends React.Component<P & WithStyles<C>, S> {

Source - https://github.com/mui-org/material-ui/issues/8598

Answer №2

HeaderStyle:{ background: ${Theme.colors.main} !important, textColor: 

${Theme.colors.secondary} !important
},

Remember to add !important to your CSS styles

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

The best practices for utilizing ES6 Modules syntax in TypeScript files within a NextJS environment

The issue appears to be trapped in a loop: package.json is missing type: "module". This results in an error when trying to use modules in TypeScript files: An error occurred while running the seed command: /Users/me/code/me/prisma-learning/grap ...

typescriptnext.jspackage.jsones6-modulesreact-typescript

Simulated database in a Service using TypeScript with Node

Struggling with a unit test, I need to mock the this.orderRepository.findById(id); method to find an object by its ID. Although I've set the return value, the test keeps failing. This is my first time creating a unit test in Node using TypeScript and ...

node.jstypescriptmockingjestjs

The value of a checkbox in Ionic 2

I have implemented the code for reading checkbox values in Ionic 2 following the answer provided. However, I encountered an error message in the console: Cannot read property 'indexOf' of undefined Here is my home.html code: <form #leadsF ...

angulartypescriptionic2

How can I access DOM elements in Angular using a function similar to the `link` function?

One way to utilize the link attribute on Angular 2 directives is by setting callbacks that can transform the DOM. A practical example of this is crafting directives for D3.js graphs, showcased in this pen: https://i.sstatic.net/8Zdta.png The link attrib ...

angulartypescriptdomd3.jsangularjs-directive

Select component with nested checkboxes for multilevel dropdown

I am interested in developing nested dropdowns with checkboxes, similar to the example shown in this image: Image 1 Is there a way to achieve this functionality using React? I have not been able to find any specific library that allows for this implement ...

javascriptreactjsmaterial-ui

Struggling with importing aliases in TypeScript for shadcn-ui library

I am facing a challenge with resolving TypeScript path aliases in my project. I have set up the tsconfig.json file to include path aliases using the "baseUrl" and "paths" configurations, but alias imports are not functioning as intended. My goal is to imp ...

reactjstypescriptnext.jsshadcnui

Is it possible to integrate Joy UI and Material UI simultaneously?

I am working on a React project that currently utilizes Joy UI components. However, I also want to incorporate Material UI elements into the app. Is it possible to integrate Material UI and Joy UI within the same React application? If so, what is the best ...

reactjsmaterial-uijoy-ui

React does not allow _id to be used as a unique key

When I retrieve the categories from my allProducts array fetched from the database using redux-toolkit, I filter and then slice the array for pagination before mapping over it. However, I keep encountering a warning: Each child in a list should have a un ...

javascriptreactjstypescript

Create a tuple type by mapping an object with generics

I have a specified object: config: { someKey: someString } My goal is to generate a tuple type based on that configuration. Here is an example: function createRouter< T extends Record<string, string> >(config: T) { type Router = { // ...

typescript

Arranging arrangements in javascript

I am dealing with objects that contain the fields id and position. const items = [{id: 11, position: 1}, {id: 12, position: 2}, {id: 13, position: 3}, {id: 14, position: 4}, {id: 15, position: 5}, {id: 16, position: 6}]; These objects represent folders st ...

javascripttypescriptalgorithm

Tips for obtaining the passed Tag name when executing the Cypress Framework

Currently, I am working with a framework that involves Cypress 12.4, TypeScript -4.9, and Cucumber (cucumber-pre-processor -15). In this framework, I have some test cases labeled as @Sanity and others as @Regression. Below you can see the package.json scri ...

node.jstypescripttagscypresscypress-cucumber-preprocessor

Utilize React to iterate through data retrieved from firebase

I'm currently facing an issue with Google Firebase Realtime database where I am unable to create an array of the collection. Whenever I loop through the const return in console log, I receive messages as individual objects. However, what I actually n ...

reactjstypescriptfirebasefirebase-realtime-database

Is there a way to adjust the TextField underline hover color based on the theme palette?

material-ui version 1 Is there a way to modify the hover color of the underline in a TextField using the theme palette in material-ui? I am aware that this can be done through overrides, but is it possible to achieve this for all components using the stan ...

material-ui

One helpful tip for adjusting the size of a UI chip on the fly

I am attempting to adjust the size of a UI chip dynamically based on the font size of its parent elements using the em unit in CSS. My objective is to achieve something like this: style={{size:'1em'}} The issue I'm encountering: The chip e ...

javascripthtmlcssreactjsmaterial-ui

What is the process for defining a collection of strings as a data type?

Is there a way to define a strict type for a group of strings that users must adhere to? I want to restrict input to only be one of the predefined strings in the group. How can I achieve this? This is my current approach: const validTypes: Array<strin ...

typescript

Using TypeScript to pass objects to an arrow function

Issue at Hand: How do I successfully transfer an object from a parent component to a child component that is derived from the same interface? I am currently facing difficulties in rendering a list of tasks by looping through a list of task objects. The ma ...

reactjstypescript

A step-by-step guide on accessing the data from an uploaded JSON file in a React application

One exciting feature is the drag and drop component that allows users to add multiple files. However, there seems to be an issue with displaying the content of a JSON file once it's added. Below is the code snippet in question: if (files?.length) ...

javascriptreactjsjsontypescriptblob

A Typescript object that matches types and eventually returns a string when called upon

In the process of overengineering a type that can match either a string or an object whose valueOf() function, when evaluated recursively, ultimately returns a string. type Stringable = string | StringableObject; interface StringableObject { valueOf() ...

typescripttypescript-typings

Connecting Ionic 3 with Android native code: A step-by-step guide

I just finished going through the tutorial on helpstack.io and was able to successfully set up the HelpStackExample with android native based on the instructions provided in the GitHub repository. The only issue is that my company project uses Ionic 3. H ...

androidangulartypescriptcordova-pluginsionic3

What are the reasons behind the restriction on using non-public members in TypeScript classes?

Consider the following scenario: class Trait { publicMethod() { this.privateMethod(); // do something more } private privateMethod() { // perform a useful action } } When attempting to implement it like this: cla ...

typescript