Material ui 主题中的断点不会更改排版的字体大小

Question

我有一个自定义材料 ui 主题，我尝试在本示例 h5 中的版式中添加断点，以便当屏幕低于定义的最大宽度时字体大小较小。媒体查询甚至没有显示在检查器中。由于某种原因它没有被应用。这是代码的相关部分。

const breakpoints = {
  values: {
    xs: 0,
      sm: 0, // Phone
      md: 768, // Tablet/Laptop
      lg: 1500, // Desktop
      xl: 2000
  }
}

function myTheme (theme) {
  const mergedTheme = createMuiTheme({
    ...theme,
    breakpoints: breakpoints, 

    typography: {
      ...theme.typography,
      fontFamily: openSans,
      fontSize: 15,
      h5: {
        fontFamily: openSans,
        fontSize: '1.5625rem', // 25px
        [`& @media screen (max-width: ${breakpoints.values.lg}px)`]: {
          fontSize: '0.06785', //11px
        }
      } 
    }
  // I have also tried just returning 
  // the mergedTheme and not used the built responsiveFontSizes
  return responsiveFontSizes(mergedTheme)
})

我还尝试使用全局覆盖，就像这里的文档中所述 https://material-ui.com/customization/globals/ 使用

overrides: {
  typography: {
    h5: {
      [`& @media screen (max-width: ${breakpoints.values.lg}px)`]: {
        fontSize: '0.06785', //11px
      }
    }
  }
}

并且仍然无法让媒体查询从主题级别工作。我可以很好地将媒体查询添加到组件中。

生成的 html 看起来像这样。

<h5 class="MuiTypography-root-76 makeStyles-label-225 makeStyles-label-246 MuiTypography-h5-85 MuiTypography-colorSecondary-100">Meeting</h5>

应用的规则是这样的。

.makeStyles-label-246 {
    font-weight: 400;
}

.MuiTypography-h5-85 {
    font-size: 1.5625rem;
    font-family: "Open Sans", "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    line-height: 1.16;
}

这个问题和答案最接近我遇到的问题。我尝试使用 createBreakpoints 就像答案中所说的那样，并尝试定位该组件

components: {
      MuiTypography: {
        styleOverrides: {
          h5: {
            padding: '10px',
            [`@media query and screen(max-width: 1500px)`]: {
              fontSize: '8px',
            },
          },
        },
      },
    },

但仍然没有骰子。

Answer 1

您有一些语法问题妨碍了这项工作。下面是一个工作版本。

主要问题是：

• 你不想&在媒体查询前
• and之后你就失踪了@media screen您在其中一个代码示例中
• 您'0.06785'的字体大小没有指示任何单位。我"0.6785rem"在我的例子中使用了，但不确定你到底想要什么。

import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
const breakpoints = {
  values: {
    xs: 0,
    sm: 0, // Phone
    md: 768, // Tablet/Laptop
    lg: 1500, // Desktop
    xl: 2000
  }
};

const theme = createMuiTheme({
  breakpoints,
  typography: {
    h5: {
      fontSize: "1.5625rem",
      [`@media screen and (max-width: ${breakpoints.values.lg}px)`]: {
        fontSize: "0.6785rem"
      }
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h5">Hello World!</Typography>
    </ThemeProvider>
  );
}