css - 带有 Material ui 的 reactjs - appbar 不支持渐变

Question

我为自己的 selfproject 创建了自己的应用栏，我也使用 Erica One 字体。我刚开始这个元素，所以代码还不够。

关于在 reactjs 中用作 Material ui 的一部分的线性和径向渐变，我有 2 个问题我还不能弄清楚:

1. Erica One 字体似乎不支持线性渐变(在我的代码中也标记为注释)
2. 我也想为应用栏使用径向渐变，但它似乎又不支持它(在我的代码中也标记为注释)

谁知道我做错了什么？它只是添加一个简单的渐变颜色和不知何故 material-ui 和字体本身只是不想让我以某种方式使用它哈哈 :)

在此先感谢代码:

page.js 文件:

import { makeStyles } from "@material-ui/core";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";

const useStyles = makeStyles((theme) => {
  return {
    typography: {
      textTransform: "uppercase",
      fontStyle: "italic",
      transform: `skew(35deg, 0deg)`,
      fontFamily: "Erica One",
      fontSize: "30px",
      color: "#F2BE46",
      fontWeightLight: 400,
      fontWeightRegular: 500,
      fontWeightMedium: 600,
      fontWeightBold: 700,
      //this is not working as well:
      //background: "-webkit-linear-gradient(#eee, #333)";
      //WebkitTextFillColor : "transparent",
      //WebkitBackgroundClip: "text",
      WebkitTextStrokeWidth: "1.2px",
      WebkitTextStrokeColor: "#000000",
      letterSpacing: "-1px",
      textShadow:
        "-1.4px 0 white, 0 1.4px white, 1.4px 0 white, 0 -1.4px white",
    },
    appbar: {
      boxShadow:
        "0 0 0 4.5px #BA7516, 0 0 0 30px #F2BE46, 0 0 0 33px #D08A28, 0 0 0 39.5px #BA7516, 0 0 0 46px #F9F4EE",
      marginTop: 48,
      width: "21.5%",
      height: "60px",
      borderRadius: "35% 35% 55px 55px",
      alignItems: "center",
      // somehow can't change it to gradient: :(
      //background: "radial-gradient(#0B3893, #0A3792)",
      background: "#0A3792",
    },
  };
});

const page= () => {
  const classes = useStyles();
  return (
    <Box
      display="flex"
      justifyContent="center"
      alignItems="center"
      alignSelf="center">
      <AppBar position="relative" className={classes.appbar}>
        <Toolbar>
          <Typography variant="h4" className={classes.typography}>
            deck builder
          </Typography>
        </Toolbar>
      </AppBar>
    </Box>
  );
};

export default page;

应用程序.js:

import { createMuiTheme, ThemeProvider } from "@material-ui/core";
import page from "./pages/page";

const theme = createMuiTheme({});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <page />
    </ThemeProvider>
  );
}

export default App;

对于字体 - index.css:

@import url('https://fonts.googleapis.com/css2?family=Erica+One&display=swap');
body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Answer 1

为了添加渐变，我尝试了下面的方法并且成功了。

<AppBar style={{ "background-image": "linear-gradient(to right, #00395d, #8f8f8c)" }}></AppBar>