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

Question

我正在使用React-Admin，并且数据库中的字段中包含线路断点( n(。当我在这样的页面上输出此内容时：

<TextField source="extra_details" />

忽略了线破的，一切都在一起。我该如何使线路断开正确显示？

谢谢

Answer 1

您默认可以使用pre-wrap样式创建自定义TextField：

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,
}

然后在使用供应商TextField时使用它。

请注意addLabel选项：您需要它以将标签保留为使用自定义组件。

您可以在这里有更多详细信息，并在此处进行示例：https：//marmelab.com/react-admin/fields.html#styling-fields

Answer 2

样式可能会有所帮助...

import {withStyles} from "@material-ui/core/styles";
const styles = {
  displayLinebreakAndTab: {whiteSpace: "pre-wrap" },
};
const SomeText = withStyles(styles)(({classes, ...props}) => (
  <TextField
    className={classes.displayLinebreakAndTab}
    {...props}
  />
));

Answer 3

我发现该线程非常有帮助。https://github.com/marmelab/react-admin/issues/2403

Textfield组件将所有道具传递给基础版式组件。因此，您可以做：

<TextField component="pre" />

Answer 4

<RichTextField />呢？

https://marmelab.com/react-admin/fields.html#richtextfield

，或者您总是可以创建自己的Textfield组件。