刪除反應材料ui組件中自動完成的下划線樣式

Question

當文本字段在反應材料 ui 的自動完成組件中獲得焦點時，我想刪除下划線樣式並更改它的顏色。

我似乎找不到要覆蓋的樣式。

提前致謝。

Answer 1

對@Liem 的回復進行了小幅更新。 直接放置InputProps會覆蓋它默認使用的InputProps ，這會破壞組件。 通過將disableUnderline與其他InputProps合並，它應該可以工作。

<Autocomplete
   renderInput={
     params => 
       <TextField 
         {...params} 
         InputProps={{...params.InputProps, disableUnderline: true}}
       />
   }
 />

Answer 2

只是為材料 v1 添加另一個答案。 在 v1 中，我們必須針對文本字段內的輸入。 為了刪除或樣式的下划線

<TextField       
    defaultValue="hello"       
    InputProps={{
       disableUnderline: true
    }}
/>

Answer 3

您可以使用呈現給<AutoComplete/>組件的<TextField/>道具來完成此操作。 因為<AutoComplete />使用<TextField/>你可以訪問這些道具。 所以你實際上有兩種方法可以刪除自動完成的下划線。 不幸的是，這在自動完成的 Material-UI 文檔中沒有記錄。

<AutoComplete underlineStyle={{display: 'none'}}>

要么

<AutoComplete underlineShow={false}>

編輯：此答案與舊版本的 Material UI 有關。 此答案不適用於 1.0 或更高版本。