css - 如何在 Material ui makeStyles 中使用 @supports css 规则？

Question

您如何使用@supports Material ui makeStyles 中的 css 规则？
我试图搜索，但没有找到任何描述如何包含 css 规则的内容，例如 supports这是我想要的样式:

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

我试过这个，但没有用:

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

Answer 1

其语法类似于媒体查询的语法。在您的情况下，您需要以下内容:

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

这是一个工作示例:

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

相关回答:

How can I use CSS @media for responsive with makeStyles on Reactjs Material UI?

相关文档:

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