如何更改材质ui TextField的标签大小? [英] How can I change the label size of a material ui TextField?

问题描述

我有一个TextField定义如下:

I have a TextField defined as follows:

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

它看起来像这样:

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

But I want it look like this:

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

The "First Name" text is larger. How can I adjust the label text size? Currently my styles object is empty. I think that should be where the CSS to do this should go, but I'm unsure what the css would look like for the label text.

谢谢

推荐答案

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

Here's an example of how to modify the label font size. This example also modifies the font-size of the input on the assumption that you would want those sizes to be in sync, but you can play around with this in the sandbox to see the effects of changing one or the other.

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

以下是文档的相关部分:

Here are the relevant parts of the documentation:

• 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/

• 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/

这篇关于如何更改材质ui TextField的标签大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！