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

【问题标题】：A simple question: Material-UI TextField, how to set different font size in different breakpoints?一个简单的问题：Material-UI TextField，如何在不同的断点设置不同的字体大小？
【发布时间】：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
        }
    }
};

【问题讨论】：

标签： material-ui

【解决方案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
        }
    }
}));

工作沙盒演示：

【讨论】：