Skip to main content

Biến chủ đề CSS - Cấu hình

Hướng dẫn cấu hình biến chủ đề CSS trong Material UI.mẫuMẫu cao cấp . Bắt đầu dự án của bạn với các mẫu tốt nhất dành cho quản trị viên, bảng điều khiển, v.v.quảng cáo của MUI

Tùy chỉnh tiền tố biến​

Để thay đổi tiền tố biến mặc định ( --mui), hãy cung cấp một chuỗi cho cssVarPrefixthuộc tính, như được hiển thị bên dưới:

createTheme({ cssVariables: { cssVarPrefix: 'any' } });

// generated stylesheet:
// --any-palette-primary-main: ...;

Sao chép

Để xóa tiền tố, hãy sử dụng một chuỗi rỗng làm giá trị:

createTheme({ cssVariables: { cssVarPrefix: '' } });

// generated stylesheet:
// --palette-primary-main: ...;

Sao chép

Chuyển đổi chế độ tối theo cách thủ công​

Để chuyển đổi giữa các chế độ theo cách thủ công, hãy thiết lập colorSchemeSelectorbằng một trong các bộ chọn sau:

lớp họcdữ liệusợi dây

Sao chép

createTheme({
  colorSchemes: { light: true, dark: true },
  cssVariables: {
    colorSchemeSelector: 'class'
  }
});

// CSS Result
.light { ... }
.dark { ... }

Sau đó, sử dụng useColorSchemehook để chuyển đổi giữa các chế độ:

import { useColorScheme } from '@mui/material/styles';

function ModeSwitcher() {
  const { mode, setMode } = useColorScheme();

  if (!mode) {
    return null;
  }

  return (
    <select
      value={mode}
      onChange={(event) => {
        setMode(event.target.value);
        // For TypeScript, cast `event.target.value as 'light' | 'dark' | 'system'`:
      }}
    >
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
  );
}

Sao chép

Sau khi React hydrat hóa cây, chế độ sẽ được thiết lập để systemtuân theo sở thích của người dùng.

Xác định chế độ hệ thống​

Để xác định chế độ hệ thống là lighthay dark, hãy sử dụng systemModethuộc tính:

const { mode, systemMode } = useColorScheme();

console.log(mode); // 'system'
console.log(systemMode); // 'light' | 'dark'

Sao chép

Tuy nhiên, nếu chế độ không phải là system , thì systemModesẽ là undefined.

const { mode, systemMode } = useColorScheme();

console.log(mode); // 'light' | 'dark'
console.log(systemMode); // undefined

Sao chép

Ngăn chặn nhấp nháy SSR​

Đối với các ứng dụng SSR (kết xuất phía máy chủ), Material UI không thể phát hiện chế độ do người dùng chọn trên máy chủ, khiến màn hình nhấp nháy từ sáng sang tối trong giai đoạn hydrat hóa trên máy khách.

Để ngăn ngừa sự cố này, bạn cần đảm bảo rằng không có lệnh nào được sử dụng theme.palette.mode === 'dark'trong cơ sở mã của bạn.

Nếu bạn gặp tình trạng như vậy, hãy thay thế nó bằng theme.applyStyleshàm:

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

 function App() {
   return (
     <Card
       sx={(theme) => ({
-        backgroundColor: theme.palette.mode === 'dark' ? '#000' : '#fff',
-        '&:hover': {
-          backgroundColor: theme.palette.mode === 'dark' ? '#333' : '#f5f5f5',
-        },
+        backgroundColor: '#fff',
+        '&:hover': {
+          backgroundColor: '#f5f5f5',
+          ...theme.applyStyles('dark', {
+            backgroundColor: '#333',
+          }),
+        },
+        ...theme.applyStyles('dark', {
+          backgroundColor: '#000',
+        }),
       })}
     />
   );
 }

Sao chép

Tiếp theo, nếu bạn có bộ chọn tùy chỉnh chưa được thêm vào media , hãy thêm InitColorSchemeScriptthành phần dựa trên khuôn khổ mà bạn đang sử dụng:

Giá trị này attributephải giống với giá trị bạn thiết lập trong colorSchemeSelectorthuộc tính:

createTheme({
  cssVariables: {
    colorSchemeSelector: 'class'
  }
})

<InitColorSchemeScript attribute="class" />

Sao chép

Bộ định tuyến ứng dụng Next.js​

Thêm đoạn mã sau vào tệp bố cục gốc :

ứng dụng/layout.js

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

export default function RootLayout(props) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        {/* must come before the <main> element */}
        <InitColorSchemeScript attribute="class" />
        <main>{children}</main>
      </body>
    </html>
  );
}

Sao chép

Nếu bạn không thêm suppressHydrationWarningvào <html>thẻ của mình, bạn sẽ thấy cảnh báo về "Extra attributes from the server"việc InitColorSchemeScriptcập nhật phần tử đó.

Bộ định tuyến trang Next.js​

Thêm đoạn mã sau vào pages/_document.jstệp tùy chỉnh:

trang/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document';
import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>...</Head>
        <body>
          {/* must come before the <Main> element */}
          <InitColorSchemeScript attribute="class" />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Sao chép

Gatsby​

Đặt tập lệnh vào gatsby-ssr.jstệp của bạn:

import * as React from 'react';
import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';

export function onRenderBody({ setPreBodyComponents }) {
  setPreBodyComponents([<InitColorSchemeScript attribute="class" />]);
}

Sao chép

Buộc áp dụng một bảng màu cụ thể​

Để áp dụng một bảng màu cụ thể cho một phần nào đó của ứng dụng, hãy đặt bộ chọn trực tiếp vào thành phần hoặc phần tử HTML.

Trong ví dụ dưới đây, tất cả các thành phần bên trong divsẽ luôn tối:

lớp họcthuộc tính dữ liệu

Sao chép

// if the selector is '.mode-%s'
<div className=".mode-dark">
  <Paper sx={{ p: 2 }}>
    <TextField label="Email" type="email" margin="normal" />
    <TextField label="Password" type="password" margin="normal" />
    <Button>Sign in</Button>
  </Paper>
  {/* other components */}
</div>

Vô hiệu hóa bảng màu CSS​

Theo mặc định, createThemeđính kèm một thuộc tính CSScolor-scheme dựa trên chế độ bảng màu. Bạn có thể vô hiệu hóa điều này bằng cách thiết lập disableCssColorSchemethành true:

createTheme({
  cssVariables: { disableCssColorScheme: true },
});

Sao chép

Mã CSS được tạo ra sẽ không bao gồm color-schemethuộc tính:

 @media (prefers-color-scheme: dark) {
   :root {
-    color-scheme: dark;
     --mui-palette-primary-main: #90caf9;
     ...
   }
 }

Sao chép

Chuyển đổi tức thời giữa các bảng màu​

Để vô hiệu hóa hiệu ứng chuyển tiếp CSS khi chuyển đổi giữa các chế độ, hãy áp dụng thuộc disableTransitionOnChangetính:

<ThemeProvider disableTransitionOnChange />
5:11:18 AM