如何在 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>
  );
}

相关回答：

• 如何在 Reactjs Material UI 上使用 CSS @media 与 makeStyles 进行响应？

相关文档：

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