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

Question

我有一个 TextField 定义如下：

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

它看起来像这样：

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

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

谢谢

Answer 1

这是一个如何在 Material-UI 的 v4 中修改标签字体大小的示例（v5 示例进一步向下）。此示例还假设您希望这些大小同步，从而修改输入的字体大小，但您可以在沙箱中使用它来查看更改一个或另一个的效果。

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,
    color: "red",
    "&$labelFocused": {
      color: "purple"
    }
  },
  labelFocused: {}
};
function App({ classes }) {
  return (
    <div className="App">
      <TextField
        id="standard-with-placeholder"
        label="First Name"
        InputProps={{ classes: { root: classes.inputRoot } }}
        InputLabelProps={{
          classes: {
            root: classes.labelRoot,
            focused: classes.labelFocused
          }
        }}
        margin="normal"
      />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

下面是 Material-UI v5 的等效示例，使用styled代替withStyles：

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

import MuiTextField from "@material-ui/core/TextField";
import { inputClasses } from "@material-ui/core/Input";
import { inputLabelClasses } from "@material-ui/core/InputLabel";
import { styled } from "@material-ui/core/styles";

const TextField = styled(MuiTextField)(`
  .${inputClasses.root} {
    font-size: 30px;
  }
  .${inputLabelClasses.root} {
    font-size: 30px;
    color: red;
    &.${inputLabelClasses.focused} {
      color: purple;
    }
  }
`);
function App() {
  return (
    <div className="App">
      <TextField
        id="standard-with-placeholder"
        label="First Name"
        margin="normal"
        variant="standard"
      />
    </div>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

以下是文档的相关部分：

• https://material-ui.com/api/text-field/
• https://material-ui.com/api/input/
• https://material-ui.com/api/input-label/
• https://material-ui.com/api/form-label/