Material-UI的TextField多行区域中的输入文本重叠
Posted
技术标签:
【中文标题】Material-UI的TextField多行区域中的输入文本重叠【英文标题】：Input text overlapping in TextField multiline area of Material-UI 【发布时间】：2020-03-09 09:40:57 【问题描述】：Material-UI 多行文本字段中的输入文本相互重叠（不是标签）。 请参阅 CodeSandBox 中的示例和代码：https://codesandbox.io/s/keen-wu-yquk6
我怀疑这可能与我将 Font-Sized 增加到 30 的事实有关，但 line-height（或其他东西）仍然为默认大小字体配置。
示例截图：
import React from "react";
import styled from "styled-components";
import makeStyles from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles(theme => (
container:
display: "flex",
flexWrap: "wrap"
,
textField:
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 350
));
const StyledTextField = styled(TextField)`
.MuiInput-underline::before
border-bottom-color: white;
.MuiInput-underline:hover:not(.Mui-disabled)::before
border-bottom-color: white;
.MuiInput-underline::after
border-bottom-color: #fdcd39;
`;
const StyledTextArea1 = ( Label, fieldType, handleChange ) =>
const classes = useStyles();
return (
<StyledTextField
id="standard-basic"
className=classes.textField
label="Test Label"
multiline
fullWidth
rows="5"
variant="outlined"
margin="normal"
// onChange=handleChange(fieldType)
InputLabelProps=
style:
color: "black",
fontSize: 30,
borderBottom: "white",
fontFamily: "Akrobat"
inputProps=
style:
fontSize: 30,
color: "#fdcd39",
fontFamily: "Akrobat",
fontWeight: 800
/>
);
;
export StyledTextArea1 ;
非常感谢任何帮助。
【问题讨论】：
【参考方案1】：通过inputProps 设置字体样式在textarea 元素上定义这些样式，而Material-UI 控制包装textarea 的div（使用MuiInputBase-root CSS 类）上的字体大小。如果您将控制字体样式的位置移动到目标.MuiInputBase-root，它会按需要工作。
import React from "react";
import styled from "styled-components";
import makeStyles from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles(theme => (
container:
display: "flex",
flexWrap: "wrap"
,
textField:
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
width: 350
));
const StyledTextField = styled(TextField)`
.MuiInputBase-root
font-size: 30px;
color: #fdcd39;
font-family: Akrobat;
font-weight: 800;
.MuiInput-underline::before
border-bottom-color: white;
.MuiInput-underline:hover:not(.Mui-disabled)::before
border-bottom-color: white;
.MuiInput-underline::after
border-bottom-color: #fdcd39;
`;
const StyledTextArea1 = ( Label, fieldType, handleChange ) =>
const classes = useStyles();
return (
<StyledTextField
id="standard-basic"
className=classes.textField
label="Test Label"
defaultValue="Default Value"
multiline
fullWidth
rows="5"
variant="outlined"
margin="normal"
// onChange=handleChange(fieldType)
InputLabelProps=
style:
color: "black",
fontSize: 30,
borderBottom: "white",
fontFamily: "Akrobat"
/>
);
;
export StyledTextArea1 ;
在我的沙箱中，我还在index.js 中的所有内容周围添加了<StylesProvider injectFirst>，以确保在<head> 中的Material-UI CSS 类之后注入样式组件CSS 类，以便您的样式通过样式覆盖-在特异性相同的情况下，组件将获胜。
【讨论】：
太棒了！谢谢瑞恩。像魅力一样工作。以上是关于Material-UI的TextField多行区域中的输入文本重叠的主要内容，如果未能解决你的问题，请参考以下文章
ReactJS material-ui TextField 应用 css
如何从 Material-UI 中删除 TextField 的下划线？ [复制]