reactjs with material ui - appbar doesn't support gradients

Question

I created my own appbar for my own selfproject, and i also use Erica One font. I just started the project so there is not enough code anyway.

I have 2 problems that I can't figure it out yet about linear and radial gradients used as part of material ui in reactjs:

1. Erica One font seems not to support linear gradient (marked as a comment in my code as well)
2. I want to use radial gradient as well for the appbar and again it seems like it doesn't support it (marked as a comment in my code as well)

anyone knows what I did wrong? it's just to add a simple gradient colors and somehow material-ui and the font itself just don't want me to use it somehow haha :)

thanks in advance here is the code:

page.js file:

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;

for the font - 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

For adding gradients, I tried the below and it worked.

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

Answer 2

1-You should put parentheses like this:

''

you put:

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

Replace what you wrote with this line:

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

2-or try to use:

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

3-and I think you must put 'backgrounfColor' not 'background'.

4-just use 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-and I think , it doesn't support linear-gradient or radial-gradient. However, if you want to use these css functions, you can always override the badge class of the Badge component. For example:

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