一个简单的问题：材质UI文本字段，如何在不同的断点设置不同的字体大小？

Question

我认为这在HTML/CSS中只是一个简单的任务，但在MaterialUI中，如何在MaterialUI中为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
        }
    }
};

Answer 1

要使用media query更改TextField的字体大小，请使用InputPropsprop以根输入类为目标，然后选择input类。InputProps中提供的类应用于input元素。

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

现在在makeStyles中设置textfieldstyle类的样式，要添加@media查询，请使用主题。断点方法。这里有解释。

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