Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

48
Vistas
How to use sx prop in react to change the color of a navbar?

I am attempting to create a black navbar in react. Here is my code so far:

import UploadIcon from "@mui/icons-material/Upload";
import CustomButton from "./CustomButton";
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import {createMuiTheme} from '@material-ui/core/styles'

const Header = () => {
    return (
        <AppBar sx = {{color:'black'}}
            position="sticky">
            <Toolbar variant="dense">
                <CustomButton
                    text='Upload' endIcon={<UploadIcon/>}/>
            </Toolbar>
        </AppBar>

    )
}
export default Header;

The techniques that I have tried so far to change the color of my appbar have been solutions proposed here: https://smartdevpreneur.com/setting-material-ui-appbar-color-and-styling/#Method_1_Styling_AppBar_With_Classes

All previous threads I've seen in stack overflow about this have also not helped me. How do I change the color of my navbar ?

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Styling the toolbar instead of styling the appbar worked. Here is my final code

import UploadIcon from "@mui/icons-material/Upload";
import CustomButton from "./CustomButton";
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import {createMuiTheme} from '@material-ui/core/styles'


const Header = () => {
    return (
        <AppBar
            position="sticky">
            <Toolbar
                sx = {{background:'black',}}
                variant="dense">
                    <CustomButton
                        text='Upload'
                        endIcon={<UploadIcon/>}/>
            </Toolbar>
        </AppBar>
    )
}
export default Header;
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos