如何在 Material UI 中更改框颜色

Question

我是网络开发的新手。话虽如此，我正在尝试使用 Material-UI 更改框颜色，但它不起作用。 (color=success.main)

目前，我得到的颜色是原蓝色。我试图改变每个盒子组件，但它并没有真正适用于其中任何一个。

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>
    )
};

Answer 1

使用“bgcolor”而不是“color”

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

Answer 2

我认为你应该定义一个类来为 . 你应该试试：

...
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>
    )
};