一个简单的问题：Material-UI TextField，如何在不同的断点设置不同的字体大小？

Posted 2023-02-22

【中文标题】一个简单的问题：Material-UI TextField，如何在不同的断点设置不同的字体大小？

【英文标题】：A simple question: Material-UI TextField, how to set different font size in different breakpoints?

【发布时间】：2021-04-29 23:44:58

【问题描述】：

我认为这只是 html/CSS 中的一项简单任务，但在 Material-UI 中，如何在 Material-UI 中为 TextField 设置不同的字体大小？

以下代码不起作用：

<TextField
    name="keyword"
    InputProps=
        style: styles.textField
    
    placeholder="Type here"
/>
const styles = 
    textField: 
        fontSize: 16,
        '@media (min-width: 576px)': 
            fontSize: 20
        ,
        '@media (min-width: 768px)': 
            fontSize: 22
        
    
;

【参考方案1】：

要使用media-query 更改TextField 的字体大小，请使用InputProps 属性定位根输入类，然后选择input 类。 InputProps 中提供的类应用于 input 元素。

<TextField
  InputProps= classes:  input: classes.textFieldStyle 
  variant="outlined"
/>

现在在makeStyles 中设置textFeildStyle 类的样式，添加@media-queries 使用theme.breakpoints 方法。解释为here。

const useStyles = makeStyles((theme) => (
    [theme.breakpoints.down("lg")]: 
        textFieldStyle: 
            color: "yellow",
            fontSize: 19
        
    ,
    [theme.breakpoints.down("md")]: 
        textFieldStyle: 
            color: "green",
            fontSize: 17
        
    ,
    [theme.breakpoints.down("sm")]: 
        textFieldStyle: 
            color: "blue",
            fontSize: 15
        
    
));

工作沙盒演示：