Javascript 在页脚中编辑版权功能

我正在尝试在我的黑色页脚中使用此函数：

import Typography from '@material-ui/core/Typography';

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

export default function App() {
  return (

    <Container >
          <Header></Header>
        <Typography variant="h4" component="h1" gutterBottom>
          Instaride Web App
        </Typography>
        <Copyright />
      <Footer></Footer>
    </Container>
  );
}

---

根据物料界面文档，这些是可用于

颜色

属性的唯一可能值

现在，该怎么办？ 您可以使用类来覆盖默认的CSS行为

<Typography variant="body2" color="textSecondary" align="center" classes={{root: 'some-class-name'}}>

---

以下是如何使用梅的造型

import React from "react";
import ReactDOM from "react-dom";
import { Container, Typography, Link } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  bg: {
    backgroundColor: "grey"
  },
  copyright: {
    color: "white"
  }
});

function App() {
  const classes = useStyles();

  function Copyright() {
    return (
      <Typography
        className={classes.copyright}
        variant="body2"
        color="textSecondary"
        align="center"
      >
        {"Copyright © "}
        <Link color="inherit" href="https://material-ui.com/">
          Your Website
        </Link>{" "}
        {new Date().getFullYear()}
        {"."}
      </Typography>
    );
  }

  return (
    <Container className={classes.bg}>
      <Typography variant="h4" component="h1" gutterBottom>
        Instaride Web App
      </Typography>
      <Copyright />
    </Container>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core”导入{容器、排版、链接}；
从“@material ui/core/styles”导入{makeStyles}”；
const useStyles=makeStyles({
背景：{
背景颜色：“灰色”
},
版权所有：{
颜色：“白色”
}
});
函数App（）{
const classes=useStyles（）；
函数版权（）{
返回(
{“版权”}
你的网站
{" "}
{新日期（）.getFullYear（）}
{"."}
);
}
返回(
Instaride Web应用程序
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
您到底想如何更改颜色？最初，它是排版中的
color=“textSecondary”
。我将其更改为黑色。不起作用。您从哪里导入
组件？任何特定的UI库？@evolon
从“@material UI/core/pathography”导入排版；
.some-class-name {
  color: black;
}

import React from "react";
import ReactDOM from "react-dom";
import { Container, Typography, Link } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  bg: {
    backgroundColor: "grey"
  },
  copyright: {
    color: "white"
  }
});

function App() {
  const classes = useStyles();

  function Copyright() {
    return (
      <Typography
        className={classes.copyright}
        variant="body2"
        color="textSecondary"
        align="center"
      >
        {"Copyright © "}
        <Link color="inherit" href="https://material-ui.com/">
          Your Website
        </Link>{" "}
        {new Date().getFullYear()}
        {"."}
      </Typography>
    );
  }

  return (
    <Container className={classes.bg}>
      <Typography variant="h4" component="h1" gutterBottom>
        Instaride Web App
      </Typography>
      <Copyright />
    </Container>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);