如何在CSS文件中引用MaterialUI自定义主题的断点值？

当然可以实现！由于.css文件无法直接读取JavaScript中的主题对象，我们需要通过一些小技巧把断点值传递到CSS环境中。下面给你两种最实用的方案：

方案一：使用全局CSS变量注入断点值 #

这是最直接适配独立.css文件的方法，步骤很简单：

1. 在根组件中注入CSS变量
   在你的根组件（比如App.js）里，利用useEffect把主题的断点值设置为全局CSS变量，这样整个应用的CSS都能访问到：

   import React, { useEffect } from 'react';
   import customTheme from './path-to-your-theme-file';
   
   function App() {
     useEffect(() => {
       // 将断点值挂载到根元素的全局CSS变量上
       const root = document.documentElement;
       root.style.setProperty('--bp-xs', `${customTheme.breakpoints.values.xs}px`);
       root.style.setProperty('--bp-sm', `${customTheme.breakpoints.values.sm}px`);
       root.style.setProperty('--bp-md', `${customTheme.breakpoints.values.md}px`);
       root.style.setProperty('--bp-lg', `${customTheme.breakpoints.values.lg}px`);
       root.style.setProperty('--bp-xl', `${customTheme.breakpoints.values.xl}px`);
     }, []);
   
     return (
       {/* 你的应用组件内容 */}
     );
   }
   
   export default App;
   

2. 在.css文件中引用CSS变量
   现在你可以在任意.css文件的媒体查询里直接使用这些变量了，完全和主题断点保持同步：

   @media screen and (max-width: var(--bp-md)) and (min-width: var(--bp-sm)) {
     .layout-content {
       grid-template-columns: 1fr 200px 200px 200px 1fr;
       grid-template-rows: 64px auto 1fr auto;
       grid-template-areas: "h h h h h" ". l m m ." ". r m m ." "f f f f f";
     }
   }
   

方案二：利用Material-UI内置方法生成媒体查询（更贴合MUI生态） #

Material-UI的breakpoints对象自带up、down、between方法，可以直接生成标准化的媒体查询字符串。如果你不想维护CSS变量，也可以直接在JS中生成样式并注入到页面：

import React, { useEffect } from 'react';
import customTheme from './path-to-your-theme-file';

function App() {
  useEffect(() => {
    // 用MUI的between方法生成目标媒体查询
    const mediaQuery = customTheme.breakpoints.between('sm', 'md');
    // 创建style标签并注入样式
    const styleSheet = document.createElement('style');
    styleSheet.textContent = `
      ${mediaQuery} {
        .layout-content {
          grid-template-columns: 1fr 200px 200px 200px 1fr;
          grid-template-rows: 64px auto 1fr auto;
          grid-template-areas: "h h h h h" ". l m m ." ". r m m ." "f f f f f";
        }
      }
    `;
    document.head.appendChild(styleSheet);
    
    // 组件卸载时清理样式
    return () => document.head.removeChild(styleSheet);
  }, []);

  return (
    {/* 你的应用组件内容 */}
  );
}

export default App;

小提示 #

Material-UI的between方法生成的媒体查询会自动给上限断点减0.05px（比如md:960px会变成max-width:959.95px），这是为了避免不同断点的媒体查询重叠。如果你需要完全匹配硬写的数值，可以手动调整，比如在CSS变量方案中用calc(var(--bp-md) - 0.01px)作为上限。

内容的提问来源于stack exchange，提问作者honkskillet