css - 在 css 中访问 MaterialUI 断点

Question

在一个 create-react-app 元素中，我正在使用 material-ui 1.x 并创建一个带有自定义断点的自定义主题，这样......

import {  createMuiTheme } from '@material-ui/core/styles';
let customTheme = createMuiTheme({
  breakpoints:{
    values:{
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920
    }
  }
});
export default customTheme;

是否可以在 .css 文件中引用这些断点。例如，我有一个使用媒体查询的布局组件...

...
@media screen
 and (max-width: 850px) and (min-width: 640px){  /* <--- HERE   */
    .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";
    }
}
...

是否可以从 materail-ui 主题对象中获取那些 css 媒体查询的值？

Answer 1

如果您只针对现代浏览器，您可能能够使用 CSS 自定义变量。在 Javascript 中设置它们

for (key in breakpoints.values) {
    document.body.style.setProperty(
        "--theme-breakpoint-" + key,
        breakpoint.values[key] + "px"
    );
}

然后在CSS中引用它们

.some-class {
    min-width: var(--theme-breakpoint-sm);
}

不过，您不能在媒体查询中使用自定义属性，因此在上面的特定示例中，您必须重新构建 CSS。如果不了解整个布局和样式，很难说这是否可行。