Truy vấn phương tiện css cảm xúc

Question

Đây là móc nối truy vấn phương tiện CSS cho React. Nó lắng nghe các kết quả phù hợp với truy vấn phương tiện CSS. Nó cho phép kết xuất các thành phần dựa trên việc truy vấn có khớp hay không

Nội dung chính Show

Sử dụng trình trợ giúp điểm dừng của MUI
Sử dụng cú pháp JavaScript
thử nghiệm
Kết xuất chỉ phía máy khách
Kết xuất phía máy chủ
Di chuyển từ import useMediaQuery from '@mui/material/useMediaQuery'; function MyComponent() { const matches = useMediaQuery((theme) => theme.breakpoints.up('sm')); return {`theme.breakpoints.up('sm') matches: ${matches}`}; } 2

Một số tính năng chính

⚛️ Nó có API React đặc trưng
🚀 Nó hoạt động hiệu quả, nó quan sát tài liệu để phát hiện khi các truy vấn phương tiện của nó thay đổi, thay vì thăm dò các giá trị theo định kỳ
📦 1 kB được nén
🤖 Nó hỗ trợ kết xuất phía máy chủ

Bạn nên cung cấp truy vấn phương tiện cho đối số đầu tiên của hook. Chuỗi truy vấn phương tiện có thể là bất kỳ truy vấn phương tiện CSS hợp lệ nào, e. g.

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

2

⚠️ Bạn không thể sử dụng giới hạn

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

3 cho mỗi trình duyệt, e. g. firefox

Sử dụng trình trợ giúp điểm dừng của MUI

Bạn có thể sử dụng trình trợ giúp điểm dừng của MUI như sau

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

Bản sao (hoặc $keyC)

Ngoài ra, bạn có thể sử dụng chức năng gọi lại, chấp nhận chủ đề làm đối số đầu tiên

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

Bản sao (hoặc $keyC)

⚠️ Không có hỗ trợ chủ đề mặc định, bạn phải đưa nó vào nhà cung cấp chủ đề gốc

Sử dụng cú pháp JavaScript

Bạn có thể sử dụng json2mq để tạo chuỗi truy vấn phương tiện từ một đối tượng JavaScript

thử nghiệm

Bạn cần triển khai matchMedia trong môi trường thử nghiệm của mình

Chẳng hạn, jsdom chưa hỗ trợ nó. Bạn nên polyfill nó. Nên sử dụng css-mediaquery để mô phỏng

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

Bản sao (hoặc $keyC)

Kết xuất chỉ phía máy khách

Để thực hiện hydrat hóa phía máy chủ, hook cần kết xuất hai lần. Lần đầu tiên với

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

4, giá trị của máy chủ và lần thứ hai với giá trị đã giải quyết. Chu kỳ kết xuất vượt qua kép này đi kèm với một nhược điểm. Nó chậm hơn. Bạn có thể đặt tùy chọn

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

5 thành

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

0 nếu bạn chỉ hiển thị phía máy khách

const matches = useMediaQuery('(min-width:600px)', { noSsr: true });

Bản sao (hoặc $keyC)

hoặc nó có thể bật nó trên toàn cầu với chủ đề

const theme = createTheme({
  components: {
    MuiUseMediaQuery: {
      defaultProps: {
        noSsr: true,
      },
    },
  },
});

Bản sao (hoặc $keyC)

Kết xuất phía máy chủ

Trước tiên hãy thử dựa vào các truy vấn phương tiện CSS phía máy khách. Ví dụ, bạn có thể sử dụng

Nếu không có lựa chọn thay thế nào ở trên là một tùy chọn, bạn có thể tiếp tục đọc phần tài liệu này

Trước tiên, bạn cần đoán các đặc điểm của yêu cầu của khách hàng, từ máy chủ. Bạn có sự lựa chọn giữa việc sử dụng

Đại lý người dùng. Phân tích chuỗi tác nhân người dùng của máy khách để trích xuất thông tin. Nên sử dụng ua-parser-js để phân tích tác nhân người dùng
gợi ý khách hàng. Đọc các gợi ý mà máy khách đang gửi đến máy chủ. Xin lưu ý rằng tính năng này không được hỗ trợ ở mọi nơi

Cuối cùng, bạn cần cung cấp triển khai matchMedia cho

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

1 với các đặc điểm đã đoán trước đó. Nên sử dụng css-mediaquery để mô phỏng matchMedia

Ví dụ ở phía máy chủ

Đảm bảo rằng bạn cung cấp cùng một triển khai phương tiện khớp tùy chỉnh cho phía máy khách để đảm bảo khớp hydrat hóa

Di chuyển từ import useMediaQuery from '@mui/material/useMediaQuery'; function MyComponent() { const matches = useMediaQuery((theme) => theme.breakpoints.up('sm')); return {`theme.breakpoints.up('sm') matches: ${matches}`}; } 2

Thành phần bậc cao hơn của

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

2 chèn chiều rộng màn hình của trang. Bạn có thể tạo lại hành vi tương tự với móc

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

4

API

Tranh luận

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

5 (chuỗi. chức năng). Một chuỗi đại diện cho truy vấn phương tiện cần xử lý hoặc hàm gọi lại chấp nhận chủ đề (trong ngữ cảnh) trả về một chuỗi

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

6 (đối tượng [tùy chọn])

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

7 (bool [tùy chọn]). Vì

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

8 không khả dụng trên máy chủ, chúng tôi sẽ trả về kết quả khớp mặc định trong lần gắn kết đầu tiên. Giá trị mặc định là

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

4

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

0 (chức năng [tùy chọn]). Bạn có thể cung cấp triển khai matchMedia của riêng mình. Điều này có thể được sử dụng để xử lý cửa sổ nội dung khung nội tuyến

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

1 (bool [tùy chọn]). Mặc định là

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

4. Để thực hiện hydrat hóa phía máy chủ, hook cần kết xuất hai lần. Lần đầu tiên với

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

4, giá trị của máy chủ và lần thứ hai với giá trị đã giải quyết. Chu kỳ kết xuất vượt qua kép này đi kèm với một nhược điểm. Nó chậm hơn. Bạn có thể đặt tùy chọn này thành

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

0 nếu bạn chỉ hiển thị phía máy khách

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

5 (chức năng [tùy chọn]). Bạn có thể cung cấp triển khai matchMedia của riêng mình trong ngữ cảnh hiển thị phía máy chủ

Ghi chú. Bạn có thể thay đổi các tùy chọn mặc định bằng tính năng

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

6 của chủ đề bằng phím

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

7

trả lại

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

8. Kết quả khớp là

import useMediaQuery from '@mui/material/useMediaQuery';

function MyComponent() {
  const matches = useMediaQuery((theme) => theme.breakpoints.up('sm'));

  return {`theme.breakpoints.up('sm') matches: ${matches}`};
}

0 nếu tài liệu hiện khớp với truy vấn phương tiện và

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

4 khi không

programming css