Recently, I decided to create my own custom appbar for a personal project and opted to use the Erica One font. As it is still in its initial stages, there isn't much code written yet.
However, I've encountered two issues related to linear and radial gradients when using Material UI in ReactJS:
- The Erica One font doesn't seem to support linear gradient (this has been mentioned in my code as well)
- I also wanted to incorporate a radial gradient for the appbar, but it appears that the font doesn't support this feature either (also noted in my code)
If anyone has any insights on what might be causing these problems, please let me know. It's funny how something as simple as adding a gradient color is creating such hurdles with material-ui and the font itself! :)
Here is a snippet of the code where the issues are occurring:
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,
//The following code related to gradients is not working:
//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",
//Unable to make changes to implement gradient background :(
//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;
To include the Erica One font, you can update the index.css file:
@import url('https://fonts.googleapis.com/css2?family=Erica+One&display=swap');
body {
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}