Question

0

133

Views

Not able to override the default color of the material ui appbar

import React from 'react';
import { AppBar,Typography,Toolbar, makeStyles } from '@mui/material';

const useStyles = makeStyles({
  appbar:{
    backgroundColor:'#000000',
  }
})
const Navbar = () => {
  const classes = useStyles();
  return (
    <AppBar className={classes.appbar}>
      <Toolbar>

      </Toolbar>
    </AppBar>
  );
}
export default Navbar;

I am trying to change the default color of the appbar but this is not working , i tried using the char value of the color in place of the hex but that was also not working . Can anyone tell me whats wrong in this ? And yes , i am using the v5.4.3 of material-ui in this

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T21:29:37.121Z

You can do a one-off customization of a component with the sx-prop:

import * as React from "react";
import AppBar from "@mui/material/AppBar";

export default function ButtonAppBar() {
  return (
    <AppBar position="static" sx={{ color: "red", bgcolor: "black" }}>
      Content
    </AppBar>
  );
}

You may also be interested in MUI's color system.

0

133

Not able to override the default color of the material ui appbar

1 answers

0

Find remote jobs

Andres GPT