CODEWITHSUNDEEP
cssreactjsmaterial-ui
Anatol Zakrividoroga
Anatol Zakrividoroga

Reputation: 4518

How can you use the @supports css rule in material ui makeStyles?

How can you use the @supports css rule in material ui makeStyles?

I tried to search that but didn't find anything describing how to include css rules like supports

Here is the styles I want to have:

@supports (display: grid) {
  div {
    display: grid;
  }
}

I tried this but it didn't work:

const useStyles = makeStyles(() => ({
    paper: {
        '@supports': {
            '(display: grid)': {
                display: 'grid';
            },
        },
    }
}))

Upvotes: 6

Views: 1557

Answers (2)

Ryan Cogswell
Ryan Cogswell

Reputation: 81006

The syntax for this is similar to the syntax for media queries. In your case, you would want the following:

const useStyles = makeStyles(() => ({
    paper: {
        '@supports (display: grid)': {
            display: 'grid'
        }
    }
}))

Here's a working example:

import React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  button: {
    "@supports (background-color: red)": {
      marginTop: theme.spacing(5),
      backgroundColor: "red"
    },
    "@supports not (display: unsupportedvalue)": {
      color: "white"
    },
    "@supports not (display: grid)": {
      backgroundColor: "purple"
    }
  }
}));
export default function App() {
  const classes = useStyles();
  return (
    <Button className={classes.button} variant="contained">
      Hello World!
    </Button>
  );
}

Edit CSS supports

Related answer:

Related documentation:

Upvotes: 6

Prathamesh Koshti
Prathamesh Koshti

Reputation: 1360

Just like you use media queries in the Mui, the same way you can make use of @support in it!

For example:

const useStyles = makeStyles((theme) => ({
  grid: {
    "@supports (display: grid)": {
      display: "grid",
      gridTemplateColumns: "1fr 1fr"
    }
  }
}));

Whole component will look like this:

import React from "react";
import { makeStyles } from "@material-ui/core";
function Grid() {
  const useStyles = makeStyles((theme) => ({
    grid: {
      "@supports (display: grid)": {
        display: "grid",
        gridTemplateColumns: "1fr 1fr"
      }
    }
  }));

  const styles = useStyles();

  return (
    <div className={styles.grid}>
      <div>Grid Item</div>
      <div>Grid Item</div>
      <div>Grid Item</div>
      <div>Grid Item</div>
    </div>
  );
}

export default Grid;

And here's the working codesandbox example: https://codesandbox.io/s/priceless-lamarr-olciu

Upvotes: 2

Related Questions