Question

我的TextField定义如下：

<TextField
  id="standard-with-placeholder"
  label="First Name"
  className={classes.textField}
  margin="normal"
/>

它看起来像这样：

但是我希望它看起来像这样：

“名字”文本较大。如何调整标签文字大小？目前，我的样式对象为空。我认为应该是CSS应当去的地方，但是我不确定标签文本的CSS会是什么样。

谢谢

Answer 1

这是如何修改标签字体大小的示例。本示例还假设您希望输入的字体大小是同步的，但可以修改输入的字体大小，但是您可以在沙箱中尝试使用它来查看更改一个或另一个的效果。

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  inputRoot: {
    fontSize: 30
  },
  labelRoot: {
    fontSize: 30
  }
};
function App({ classes }) {
  return (
    <div className="App">
      <TextField
        id="standard-with-placeholder"
        label="First Name"
        InputProps={{ classes: { root: classes.inputRoot } }}
        InputLabelProps={{
          FormLabelClasses: {
            root: classes.labelRoot
          }
        }}
        margin="normal"
      />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

以下是文档的相关部分：

如何更改材质ui TextField的标签大小？

1 个答案: