Đâ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
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.
⚠️ Bạn không thể sử dụng 'print'
theo giới hạn của 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
Ví dụ,. 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 false
, 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 noSsr
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áchconst 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ủ. Hãy nhận biết rằng tính năng này là
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 matchMediaVí 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
import useMediaQuery from '@mui/material/useMediaQuery';
function MyComponent[] {
const matches = useMediaQuery[[theme] => theme.breakpoints.up['sm']];
return {`theme.breakpoints.up['sm'] matches: ${matches}`};
}
Thành phần bậc cao hơn
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ái tạo 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}`};
}
4API
Tranh luận
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ỗiimport 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ả lại 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 useMediaQuery from '@mui/material/useMediaQuery'; function MyComponent[] { const matches = useMediaQuery[[theme] => theme.breakpoints.up['sm']]; return {`theme.breakpoints.up['sm'] matches: ${matches}`}; }
false
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ếnimport 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]; }]; }];
false
. Để 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ớifalse
, 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
0 nếu bạn chỉ hiển thị phía máy kháchimport useMediaQuery from '@mui/material/useMediaQuery'; function MyComponent[] { const matches = useMediaQuery[[theme] => theme.breakpoints.up['sm']]; return {`theme.breakpoints.up['sm'] matches: ${matches}`}; }
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 mộtimport mediaQuery from 'css-mediaquery'; function createMatchMedia[width] { return [query] => [{ matches: mediaQuery.match[query, { width, }], addListener: [] => {}, removeListener: [] => {}, }]; } describe['MyTests', [] => { beforeAll[[] => { window.matchMedia = createMatchMedia[window.innerWidth]; }]; }];
Ghi chú. Bạn có thể thay đổi các tùy chọn mặc định bằng tính năng 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];
}];
}];
7trả 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à false
khi không