React js material-ui textfield end裝飾背景

Question

我按照此處找到的說明進行操作： https : //stackoverflow.com/a/61708197/8024296

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

我怎么能做這樣的事情，但沒有右邊的那個邊距是它遵循輸入字段的圓形趨勢。

我嘗試了以下方法，但似乎不起作用：

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

鏈接： 代碼沙盒

你能幫我個忙嗎？

Answer 1

您的代碼按預期工作以實現所需的樣式我建議添加以下代碼行：

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

而不是背景顏色：“#ccc”。

快樂編碼！

Answer 2

你是如此接近只是添加你的代碼是這樣的

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 上的工作示例 代碼和box.io上的工作示例

（小心你可以編輯它）