如何在react material-ui中使用特定浏览器的媒体查询，如-ms-high-contrast，Edge。

Question

IE

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

}

边缘

@supports (-ms-ime-align:auto) {。

}

Answer 1

要在 react material UI 中使用媒体查询，你需要使用 useMediaQuery

这是React的一个CSS媒体查询钩子。它监听CSS媒体查询的匹配信息。它允许根据查询是否匹配来渲染组件。

您应该为该钩子的第一个参数提供一个媒体查询。媒体查询字符串可以是任何有效的CSS媒体查询，例如'(prefers-color-scheme: dark)'。

例如：'(prefers-color-scheme: dark)'。

import mediaQuery from 'css-mediaquery';

function createMatchMedia(width) {
  return query => ({
    matches: mediaQuery.match(query, { width }),
    addListener: () => {},
    removeListener: () => {},
  });
}

describe('MyTests', () => {
  beforeAll(() => {
    window.matchMedia = createMatchMedia(window.innerWidth);
  });
});

因此，媒体查询将是相同的。你只需要把它作为媒体查询字符串的一个参数。