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。如果不了解整个布局和样式，这很难说是不可能的。

Answer 2

行。这导致了我的一些深刻的倾向。反应材料-ui（https://material-ui.com）包含CSS-in-JS，所以如果你选择使用这个框架，那么走这条路线真的很有意义，这意味着将我的CSS转换为JSS然后访问材料 - ui主题对象获取媒体断点。相同的CSS现在看起来像这个

 [theme.breakpoints.only('sm')]:{
    layoutContent: {
      gridTemplateColumns: '1fr 200px 200px 200px 1fr',
      gridTemplateRows:`64px
                        auto
                        1fr
                        auto`,
      gridTemplateAreas: `"h h h h h"
                          ". l m m ."
                          ". r m m ."
                          "f f f f f"`,
    }
  },

注意，现在这是JSON而不是CSS。

在css

2 个答案: