我有一个 TextField 定义如下:
<TextField
id="standard-with-placeholder"
label="First Name"
className={classes.textField}
margin="normal"
/>
它看起来像这样:
但我希望它看起来像这样:
“名字”文本较大。如何调整标签文字大小？目前我的样式对象是空的。我认为这应该是执行此操作的 CSS 所在的位置，但我不确定标签文本的 CSS 会是什么样子。
谢谢
最佳答案
这是一个如何在 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);
下面是使用 styled 而不是 withStyles 的 Material-UI v5 的等效示例:
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);
以下是文档的相关部分:
关于javascript - 如何更改 Material ui TextField 的标签大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54525334/