MUI Input Label Support

[aress31]

Please see the code below and associated render:

const MDEditorField = (props) => {
  const { formData, schema, onChange, ...propsRest } = props;
  const theme = useTheme();

  return (
    <FormControl error={!!propsRest.rawError} fullWidth>
      <InputLabel htmlFor={schema.name}>{schema.title}</InputLabel>
      <Box>
        <MDEditor
          id={schema.name}
          value={formData}
          data-color-mode={theme.palette.mode}
          onChange={(value) => onChange(value)}
          {...propsRest}
        />
      </Box>
      {propsRest.error && <FormHelperText>{propsRest.error}</FormHelperText>}
    </FormControl>
  );
};

If someone could kindly tell me how to fix the style, and properly integrate the LabelInput that would be great - also could be worth it documenting this.

[jaywcjlove]

@aress31 There is a conflict in the styles.

[aress31]

@jaywcjlove, what would be a fix?

[jaywcjlove]

react-md-editor/core/src/index.less

Lines 48 to 49 in 2520e88

	word-break: break-word !important;
	white-space: pre-wrap !important;

@aress31 We’ve added some !important CSS styles to increase specificity for compatibility with certain component libraries. Please review and submit a PR if needed.

[aress31]

@jaywcjlove it didn't fix the issue, MUI is one of the most used UI library - making react-md-editor compatible with it out of the box is important.