Как вы можете использовать правило @supports css в материале пользовательского интерфейса makeStyles?

Как вы можете использовать правило @supports css в материале пользовательского интерфейса makeStyles?

Я пытался найти это, но не нашел ничего, описывающего, как включать правила CSS, такие как supports

Вот стили, которые я хочу иметь:

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

Я пробовал это, но это не сработало:

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

css reactjs material-ui

11.12.2020 16:29

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 101

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Синтаксис для этого аналогичен синтаксису медиа-запросов. В вашем случае вам нужно следующее:

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

Связанный ответ:

Как я могу использовать CSS @media для отзывчивости с помощью makeStyles в пользовательском интерфейсе материалов Reactjs?

Связанная документация:

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

Спасибо! У вас была небольшая ошибка: display: 'grid'; должен заканчиваться запятой, а не точкой с запятой, так как это javascript, а не css, в остальном ваш ответ был идеальным!

— 13.12.2020 18:08

Я исправил синтаксис в этой части.

— 13.12.2020 18:10

11.12.2020 17:02

Точно так же, как вы используете медиа-запросы в Mui, вы можете использовать в нем @support!

Например:

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

Весь компонент будет выглядеть так:

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;

А вот пример рабочего кода и коробки: https://codesandbox.io/s/priceless-lamarr-olciu

11.12.2020 17:03