React js material-ui textfield end装饰背景

编程问答 2022-04-23

问题描述

我按照此处的说明进行操作：https://stackoverflow.com/a/61708197/8024296

但是示例代码似乎不再起作用。

我怎么能做这样的事情，但没有右边那个边距是它遵循输入字段的圆角趋势。

enter image description here

我尝试了以下方法，但似乎不起作用：

<TextField
          label="Name File"
          id="outlined-start-adornment"
          className={clsx(classes.margin,classes.textField)}
          InputProps={{
            endAdornment: <InputAdornment position="end">.docx</InputAdornment>,classes: {
              adornedEnd: classes.adornedEnd
            }
          }}
          variant="outlined"
        />

enter image description here

链接：codesandbox

你能帮我一把吗？

解决方法

您的代码按预期工作以实现所需的样式我建议添加以下代码行：

背景：'线性梯度（-90deg，#CCC 30%，#FFF 30%）'

代替背景颜色：“#ccc”。

快乐编码！

,

你是如此接近只是添加你的代码是这样的

adornedEnd: {
    backgroundColor: "#ccc",height: "2.4rem",maxHeight: "3rem",}

并修改InputProps如下：

InputProps={{endAdornment: <InputAdornment className={clsx(classes.adornedEnd)} position="end">.docx</InputAdornment>,style: {
   paddingRight: "0"
}}}

这将解决问题 codepen.io 上的一个工作示例 codesandbox.io

上的一个工作示例

（小心你可以编辑它）

javascriptmaterial-uireactjsreactjsreactjsreactjstextfieldtextfieldtextfield