How to change box color in Material UI

user_3127450 0
Viewed 16533

I'm quite new in webdevelopment. With that said, I'm trying to change the box color using Material-UI but it's not working. (color=success.main)

Currently, the color that I'm getting is the primary blue. I've tried to change every box component but It didn't really work for any of them. 

import React from "react";
import { palette } from '@material-ui/system';
import {
    AppBar,
    Toolbar, 
    Box,
    Link,
    Hidden
} from '@material-ui/core';

import { makeStyles } from '@material-ui/core/styles';
import './Navbar.css';

const useStyles = makeStyles({
    links: {
      padding: '0 50px',
      color: 'white',
      "&:hover": {
        textDecorationColor: "green",
        cursor:'pointer'
      }
    },

  });
export default function Navbar() {
const Navbar = useStyles();
    return(
        <Box component='nav' color="success.main">
            <AppBar>
                <Toolbar>
                    VK Design 
                    <Box m='auto'>
                        <Hidden only='xs'>
                            <typography><Link className={Navbar.links} underline='hover'>HOME</Link></typography>
                            <typography><Link className={Navbar.links} underline='hover'>PORTFOLIO</Link></typography>
                            <typography><Link className={Navbar.links} underline='hover'>ABOUT</Link></typography>
                            <typography><Link className={Navbar.links} underline='hover'>CONTACT</Link></typography>
                        </Hidden>
                    </Box>
                </Toolbar>
            </AppBar>
        </Box>
    )
};
material-ui
2 Answers

Use "bgcolor" instead of "color"

<Box        
    bgcolor="primary.main"        
  > ... </Box>
user_45626930

I think you should define a class to set color for . You should try:

...
const useStyles = makeStyles((theme) => ({
    root: {
      color: theme.palette.primary.main
    },
    links: {
      padding: '0 50px',
      color: 'white',
      "&:hover": {
        textDecorationColor: "green",
        cursor:'pointer'
      }
    },

  }));
export default function Navbar() {
const Navbar = useStyles();
    return(
        <Box component='nav' className={Navbar.root}>
            ...
        </Box>
    )
};

user_95482850
Related