【Material UI】アラートメッセージを改行する方法

React UIライブラリMaterial UI（MUI）のAlert（アラート）コンポーネントは、アラートとして任意のメッセージを表示できる機能です。

そこで表示するメッセージを改行したい場合の方法を紹介します。

改行コード「\n」だけでは改行されない

JavaScriptでは、改行コードとして「\n」が使えます。

コード：

const str = '1行目\n２行目';
console.log(str);

実行結果

1行目
２行目

しかし、JSX内ではこの「\n」が適用されず改行されません。

コード：

const message='1行目\n2行目'
 return (
    <Alert severity="error">{message}</Alert>
  );

表示結果：

1行目\n2行目

sxでstyleを指定して改行させる

そこで、sx に whiteSpace: ‘pre-line’ を設定することで改行することができます。

コード：

  const message='1行目\n2行目'
  return (
    <Alert sx={{ whiteSpace: 'pre-line' }}>{message}</Alert>
  );

表示結果：

1行目
２行目

See the Pen MUI Alert by hosakat (@hosakat) on CodePen.

まとめ

これでアラートメッセージを改行することができました！

今回紹介した方法は、アラートメッセージに限らず他のMUIのコンポーネントにも使うことができます。ぜひお試しください。