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

如何解决Material ui 主题中的断点不会改变排版的字体大小

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

>>> x.norm(dim=1,p=1)
>>> torch.linalg.norm(x,dim=1,ord=1)
>>> x.abs().sum(dim=1)

我也尝试使用全局覆盖，就像它在此处的文档中所述 https://material-ui.com/customization/globals/ 使用

>>> x.norm(dim=1,p=2)
>>> torch.linalg.norm(x,ord=2)
>>> x.pow(2).sum(dim=1).sqrt()

仍然无法让媒体查询从主题级别开始工作。我可以很好地向组件添加媒体查询。

生成的 html 看起来像这样。

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)
})

适用的规则是这样的。

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

this question and answer 最接近我遇到的问题。我尝试使用答案中所说的 createBreakpoints 并尝试定位组件

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

但仍然没有骰子。

解决方法

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

主要问题是：

• 您不希望在媒体查询前出现 &
• 在您的代码示例之一中，您在 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>
  );
}

,

Material-UI 有一个特定的 api，您必须使用它来根据断点更改样式。 https://material-ui.com/customization/breakpoints/#default-breakpoints。 您需要更改的只是媒体查询部分。 <fieldset> <legend>Update Claim</legend> <form method="put" onSubmit={save}> Name <input type="text" name="name" required value={values.name} onChange={set("name")}/> <br /> Age <input type="text" name="age" required value={values.age} onChange={set("age")} /> <br /> Address <input type="text" name="address" required value={values.address} onChange={set("address")} /> <br /> License No <input type="text" name="license_num" required value={values.license_num} onChange={set("license_num")} /> <br /> ID Proof <input type="text" name="id_proof" required value={values.id_proof} onChange={set("id_proof")} /> <br /> <input type="submit" value="Save" /> </form> </fieldset> </div> 将更改小于或等于指定尺寸的屏幕的选定样式。创建 MUI 主题时，您必须临时创建一个以添加到主 MUI 主题中。

theme.breakpoints.down