反応材料uiコンポーネントの下線スタイルの削除

Question

反応材料uiのオートコンプリート成分でテキストフィールドがフォーカスを取得したときに下線スタイルを削除し、その色を変更したいと考えています。

オーバーライドするスタイルが見つからないようです。

ありがとうございます。

Answer 1

これは小道具を<AutoComplete/>コンポーネントにレンダリングすることで実現できます。 <AutoComplete />は<TextField/>を使用しているため、これらの小道具にアクセスできます。つまり、オートコンプリートのアンダーラインを削除する2つの方法があります。残念ながら、これは自動完成のためのマテリアルUIドキュメントには書かれていません。

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

または

<AutoComplete underlineShow={false}>

Answer 2

ただ、材料v1の別の答えを追加します。 v1では、テキストフィールド内の入力をターゲットにする必要があります。下線を削除またはスタイルを適用するには

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