material ui 主题中的断点不改变排版的字体大小

Question

我有一个自定义的 material 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

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

主要问题是：

您不希望 & 在媒体查询前面
在您的一个代码示例中 @media screen 之后缺少 and
您的字号 '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>
  );
}

Answer 2

Material-UI 有一个特定的 api，您必须使用它来根据断点更改样式。 https://material-ui.com/customization/breakpoints/#default-breakpoints。您需要更改的只是媒体查询部分。 theme.breakpoints.down 将为小于和等于指定尺寸的屏幕更改所选样式。当您创建 MUI 主题时，您必须临时创建一个以添加到您的主 MUI 主题中。

typography: {
  ...theme.typography,
  fontFamily: openSans,
  fontSize: 15,
  h5: {
    fontFamily: openSans,
    fontSize: '1.5625rem', // 25px
    [createMuiTheme({breakpoints}).breakpoints.down('lg')]: {
      fontSize: '0.06785', //11px
    }
  } 
}

Answer 3

I manage responsive typography with little different way with React Typescript:

我创建了一个函数来处理响应式任务：

// make font size responsive
interface responsiveFontType {
  sm: number;
  md: number;
  lg: number;
}
export function responsiveFontSizes({ sm, md, lg }: responsiveFontType) {
  return {
    [`@media only screen and (min-width: ${themeBreakPoint.values.sm}px)`]: {
      fontSize: pxToRem(sm),
    },
    [`@media only screen and (min-width: ${themeBreakPoint.values.md}px)`]: {
      fontSize: pxToRem(md),
    },
    [`@media only screen and (min-width: ${themeBreakPoint.values.lg}px)`]: {
      fontSize: pxToRem(lg),
    },
  };
}

// ---------------------------------------------------
// typography customization

export const themeTypography = () => {
  // font family define
  const FONT_PRIMARY = "'Roboto', sans-serif";
  const SUBTITLE_FONT = "'Times New Roman', Times, serif";
  const SUBTITLE_FONT2 = "Arial, Helvetica, sans-serif";

  return {
    fontFamily: FONT_PRIMARY,
    fontSize: 14,
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    fontWeightBold: 700,

    title: {
      fontFamily: FONT_PRIMARY,
      fontWeight: 700,
      fontSize: pxToRem(24),
      ...responsiveFontSizes({ sm: 16, md: 20, lg: 24 }),
    },

    subtitle1: {
      fontFamily: SUBTITLE_FONT,
      fontWeight: 500,
      fontSize: pxToRem(20),
      ...responsiveFontSizes({ sm: 15, md: 18, lg: 20 }),
    },

    subtitle2: {
      fontFamily: SUBTITLE_FONT2,
      fontWeight: 400,
      fontSize: pxToRem(18),
      ...responsiveFontSizes({ sm: 14, md: 16, lg: 18 }),
    },

    button: {
      fontWeight: 700,
      lineHeight: 24 / 14,
      fontSize: pxToRem(14),
      textTransform: "capitalize",
    },
  } as TypographyOptions;
};

My create theme function

export const theme = () => {
  return createTheme({
    palette: themePalette(),

    breakpoints: themeBreakPoint,

    typography: themeTypography(),
  });
};

我认为这更容易更正确地处理事情...

material ui 主题中的断点不改变排版的字体大小

breakpoint in material ui theme not changing font size for typography

reactjs

material-ui

jss