javascript - 使用 React-Admin/Material UI 的文本字段保留换行符？

Question

我正在使用 React-Admin 并且在我的数据库中有一个包含换行符 (\n) 的字段。当我在这样的页面上输出它时:
<TextField source="extra_details" />
换行符被忽略，一切都一起运行。如何使换行符正确显示？

谢谢

Answer 1

您可以创建您的自定义 TextField与 pre-wrap默认样式:

import { FC } from "react";
import { TextField as BaseTextField, TextFieldProps } from "react-admin";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  textContent: {
    whiteSpace: "pre-wrap"
  },
});

export const TextField: FC<TextFieldProps> = (props) => {
  const classes = useStyles();

  return <BaseTextField
    className={classes.textContent}
    {...props}
  />
}
TextField.defaultProps = {
  addLabel: true,
}

然后像使用 vendor 一样使用它 TextField .
请注意 addLabel选项:您需要它来保持标签与自定义组件一起显示。
您可以在这里获得更多详细信息和 sample : https://marmelab.com/react-admin/Fields.html#styling-fields