Putting gradient background using makeStyles

Question

For some reason, it doesn't respect background: 'linear-gradient(to right, blue.200, blue.700)' under makeStyles. Why is that? All I need to do is put a gradient background on the entire space. <Container className={classes.root}> should probably be a div, what do you think?

import { useState, useEffect } from 'react';
import type { NextPage } from 'next';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { createStyles, Grid, Paper, Theme, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import Skeleton from '@mui/material/Skeleton';

import FormOne from './../src/FormOne';

const LoadingSkeleton = () => (
  <Box
    sx={{
      height: 'max-content',
    }}
  >
    {[...Array(10)].map((_, index) => (
      <Skeleton variant="rectangular" sx={{ my: 4, mx: 1 }} key={index} />
    ))}
  </Box>
);

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID' },
  { field: 'title', headerName: 'Title', width: 300 },
  { field: 'body', headerName: 'Body', width: 600 },
];

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      height: '100vh',
      overflow: 'auto',
      background: `linear-gradient(to right, blue.200, blue.700)`,
    },
  })
);

const Home: NextPage = () => {
  const classes = useStyles();

  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  // fetch data from fake API
  useEffect(() => {
    setInterval(
      () =>
        fetch('https://jsonplaceholder.typicode.com/posts')
          .then((response) => response.json())
          .then((data) => {
            setPosts(data);
            setLoading(false);
          }),
      3000
    );
  }, []);

  return (
    <Container
      maxWidth={false}
      //   sx={{
      //     height: '100vh',
      //     overflow: 'auto',
      //     background: `linear-gradient(to right, ${blue[200]}, ${blue[700]})`,
      //   }}
      className={classes.root}
    >
      <Container component="main" maxWidth="lg" sx={{ mt: 3, mb: 3 }}>
        <Grid container spacing={{ xs: 2, md: 3 }}>
          <Grid item xs={6}>
            <Paper sx={{ padding: 3 }}>
              <Typography component="h1" variant="h4" align="center">
                GUI #1
              </Typography>

              <FormOne />
            </Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper sx={{ padding: 3 }}>
              <Typography component="h1" variant="h4" align="center">
                GUI #2
              </Typography>

              <FormOne />
            </Paper>
          </Grid>
          <Grid item xs={12}>
            <Paper sx={{ padding: 3 }}>
              <DataGrid
                sx={{ height: '650px' }} // either autoHeight or this
                rows={posts}
                columns={columns}
                pageSize={10}
                // autoHeight
                rowsPerPageOptions={[10]}
                disableSelectionOnClick
                disableColumnMenu
                disableColumnSelector
                components={{
                  LoadingOverlay: LoadingSkeleton,
                }}
                loading={loading}
              />
            </Paper>
          </Grid>
        </Grid>
      </Container>
    </Container>
  );
};

export default Home;

Answer 1

I think its because you pass it as a string and it simply doesnt recognice what blue.200 is etc.

try:

background: `linear-gradient(to right, ${blue[200]}, ${blue[700])}`,

@Edit You actualy need to import color that you want to use from @mui/color

import { blue } from "@mui/material/colors";

and then use it as I mentioned before

here is codesandbox preview and here is codesandbox code

hope this is what we want to achieve