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

Question

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';
            },
        },
    }
}))

Ryan Cogswell · Accepted Answer · 2020-12-13T17:09:37.683

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

Related documentation:

https://cssinjs.org/jss-plugin-nested?v=v10.5.0#nest-at-rules

thank you! You had a little mistake: `display: 'grid';` needs to end with a comma not a semi-colon since it is javascript not css, other than that your answer was perfect! — Anatol, Dec 13 '20 at 17:08

score 2 · Answer 2 · answered Dec 11 '20 at 16:03

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

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

2 Answers2