reactjs with material ui - appbar不支持渐变

Question

我为自己的项目创建了自己的 appbar，并且我还使用 Erica One 字体。 我刚开始做项目，反正代码不够。

关于在 reactjs 中用作材质 ui 的一部分的线性和径向渐变，我有 2 个问题我无法弄清楚：

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

谁知道我做错了什么？它只是添加一个简单的渐变颜色和某种材料-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;

app.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

1-你应该这样放括号：

''

你说的：

  background: -webkit-linear-gradient(#eee, #333);

用这一行替换你写的：

 background:' -webkit-linear-gradient(#eee, #333)'

2-或尝试使用：

  background:'linear-gradient(90deg,#eee, #333)'

3-我认为你必须把'backgrounfColor'而不是'背景'。

4-只需使用 style ={{ }}

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" style={{ background: "-webkit-linear- 
            gradient(#eee, #333)", }} className={classes.typography}>
            deck builder
          </Typography>
        </Toolbar>
      </AppBar>
    </Box>
  );
};

5-我认为，它不支持线性渐变或径向渐变。但是，如果您想使用这些 css 功能，您始终可以覆盖 Badge 组件的徽章类。例如：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Badge from 'material-ui/Badge';
import MailIcon from 'material-ui-icons/Mail';

const styles = theme => ({
  badge: {
    margin: `0 ${theme.spacing.unit * 2}px`,
    background: `radial-gradient(circle at center, red 0, blue, green 100%)`
  },
});

function SimpleBadge({classes}) {
  return (
      <Badge classes={{badge: classes.badge}} badgeContent={4} color="primary">
        <MailIcon />
      </Badge>
  );
}

SimpleBadge.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleBadge);