Cách sử dụng Material UI

Bài viết này giả định rằng bạn đã cài đặt Docusaurus và bắt đầu sử dụng môi trường phát triển yêu thích của mình.

Cài đặt Material UI

Cài đặt lõi MUI.

npm install @mui/material @emotion/react @emotion/styled

Sử dụng các thành phần Material UI

Sau khi cài đặt, bạn có thể sử dụng các thành phần MUI và các công cụ khác như bình thường. Nhập chúng và sử dụng chúng trong mã của bạn .jsx. .mdxTôi đã sử dụng chúng để tạo kiểu cho trang chủ.

import Container from "@mui/system/Container";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";

<Grid container justifyContent="center" sx={{ paddingBottom: 8 }}>
  <Grid item xs={12}>
    <Card
      variant="outlined"
      sx={{
        textAlign: "center",
        boxShadow: 3,
      }}
    >
      <Typography variant="h4">This is an example</Typography>
    </Card>
  </Grid>
</Grid>;

Chủ đề vũ trụ

Tôi đã học được rất nhiều khi phát triển với Astro. Vì vậy, tôi đã tạo một bộ sưu tập các mẫu trang web để giúp bạn bắt đầu dự án tiếp theo của mình. Mọi thứ bạn cần cho một trang web sẵn sàng sản xuất. Thêm bản sao của bạn và triển khai.

Hãy kiểm tra nó

Biến chủ đề CSS của Material UI

Để tích hợp chủ đề MUI với Docusaurus, tôi đã chọn sử dụng Biến chủ đề CSS thử nghiệm MUI . Nó cho phép bạn tạo cả màu sáng và tối trong cùng một chủ đề và chuyển đổi giữa chúng bằng cách sử dụng MUI setModetừ useColorScheme.

Tạo chủ đề màu MUI

Đầu tiên tôi tạo bảng màu của mình trong một tệp tôi đặt tên index.jsxlà /src/components/MuiTheme/index.jsx. Giống như MUI createTheme, bạn chỉ cần chỉ định các biến bạn muốn thay đổi từ mặc định. Một chủ đề đơn giản hóa nằm bên dưới.

import { experimental_extendTheme as extendTheme } from "@mui/material/styles";

// General MUI theme
const extTheme = extendTheme({
  colorSchemes: {
    light: {
      palette: {
        primary: {
          main: "hsl(240, 48%, 47%)",
        },
        background: {
          paper: "hsl(240, 15%, 95%)",
        },
      },
    },
    dark: {
      palette: {
        primary: {
          main: "hsl(240, 90%, 70%)",
        },
        background: {
          paper: "hsl(210, 3%, 15%)",
        },
      },
    },
  },
});

export default extTheme;

Áp dụng chủ đề MUI vào trang web

Chúng ta cần nhập chủ đề MUI và bao bọc nó xung quanh toàn bộ trang web. Điều này có thể được thực hiện bằng cách chuyển đổi . <Root>Đối với điều này, chúng ta chỉ cần tạo một tệp Root.jstại /src/theme/Root.js. Sau đó đặt mã bên dưới vào tệp đó.

import React from "react";
import { getInitColorSchemeScript } from "@mui/material/styles";
import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles";
import theme from "@site/src/components/MuiTheme";

export default function Root({ children }) {
  return (
    <>
      {getInitColorSchemeScript()}
      <CssVarsProvider theme={theme}>{children}</CssVarsProvider>
    </>
  );
}

Phù hợp với chủ đề Docusaurus và MUI

Bây giờ chúng ta cần xác định Docusaurus đang ở chế độ màu nào và đồng bộ hóa với chủ đề MUI của chúng ta.

Chế độ màu chuyển đổi

Để phù hợp với các bảng màu, tôi đã sử dụng lại tính năng swizzling của Docusaurus để bao bọc chúng ColorModeTogglevà thêm chức năng của riêng tôi. Thành phần này được gắn nhãn "An toàn" để swizzle và wrap là lựa chọn tốt nhất. Xem tài liệu Docusaurus về Swizzling nếu bạn muốn biết thêm thông tin về chức năng này.

Tóm lại, lệnh tôi đã chạy là:

npm run swizzle @docusaurus/theme-classic ColorModeToggle -- --wrap

Thao tác này sẽ tạo ra lớp bao bọc ColorModeToggle tại /src/theme/ColorModeToggle/index.js.

Đồng bộ hóa các chủ đề

Sau đó, bên trong ColorModeToggle index.jsbạn có thể thêm chức năng chuyển đổi chế độ (tại /src/theme/ColorModeToggle/index.js).

import React, { useEffect } from "react";
import ColorModeToggle from "@theme-original/ColorModeToggle";
import { useColorScheme } from "@mui/material/styles";

export default function ColorModeToggleWrapper(props) {
  // MUI color mode setting
  const { setMode } = useColorScheme();

  // "value" holds the color theme. Either "light" or "dark"
  const { value } = props;

  // change mode based on "value" prop
  // "dark" or "light" are also used for MUI
  useEffect(() => {
    setMode(value);
  }, [value]);

  return (
    <>
      <ColorModeToggle {...props} />
    </>
  );
}

Sử dụng chủ đề MUI ở nơi khác

Bây giờ các chủ đề đã đồng bộ, chúng ta có thể sử dụng chủ đề đã đồng bộ đó ở bất kỳ đâu trên trang web! Bao gồm cả phần tài liệu và blog này. Vì toàn bộ trang web được bao bọc trong Root.js, không cần thêm bước nào nữa. Bạn thậm chí có thể tham chiếu các biến chủ đề của mình từ bên trong các thành phần. Dưới đây tôi đã thêm bằng cách sử dụng primary.mainmàu cho văn bản (thay đổi giữa chế độ tối và sáng).

import Container from "@mui/system/Container";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles";
import theme from "@site/src/components/MuiTheme";

<Grid container justifyContent="center" sx={{ paddingBottom: 4 }}>
  <Grid item xs={12}>
    <Card
      variant="outlined"
      sx={{
        textAlign: "center",
        boxShadow: 3,
      }}
    >
      <Typography variant="h4" sx={{ color: "primary.main" }}>
        This is an example
      </Typography>
    </Card>
  </Grid>
</Grid>;

Tài liệu bổ sung

Để biết thêm chi tiết về các biến chủ đề CSS của MUI, hãy xem tài liệu của họ .

Chủ đề vũ trụ

Tôi đã học được rất nhiều khi phát triển với Astro. Vì vậy, tôi đã tạo một bộ sưu tập các mẫu trang web để giúp bạn bắt đầu dự án tiếp theo của mình. Mọi thứ bạn cần cho một trang web sẵn sàng sản xuất. Thêm bản sao của bạn và triển khai.

Hãy kiểm tra nó

Thành công lớn

Bây giờ bạn đã thiết lập Material UI trong Docusaurus. Thật thành công. 🚀

Đừng quên theo dõi tôi trên Twitter để biết thêm mẹo về Astro, phát triển web và thiết kế web!

https://webreaper.dev/posts/material-ui-theme-with-docusaurus/