Material-UIで入力フィールドの枠線の色を変更する方法

1. スタイルの準備: 入力フィールドの枠線の色を変更するために、スタイルを定義する必要があります。次のようなスタイルオブジェクトを作成します。

const styles = {
  input: {
    border: '2px solid red', // 枠線の色を変更したい色に変更してください
  },
};

2. 入力フィールドのコンポーネントを作成: Material-UIのTextFieldコンポーネントを使用して、カスタムスタイルを適用した入力フィールドを作成します。

import TextField from '@material-ui/core/TextField';
// ...
<TextField
  label="入力フィールド"
  variant="outlined"
  style={styles.input}
/>

上記のコードでは、TextFieldコンポーネントにstyleプロパティを追加し、先ほど定義したスタイルオブジェクトstyles.inputを渡しています。

これで入力フィールドの枠線の色が変更されます。適宜、styles.inputのborderプロパティの値を変更して、好みの色やスタイルに合わせることができます。

以上がMaterial-UIで入力フィールドの枠線の色を変更する方法です。この手法を使えば、簡単にカスタマイズされた入力フィールドを作成することができます。