javascriptreactjsreact-hooksreact-draft-wysiwyg

REACT- Why using 'style' with react-draft-wysiwyg is not working?


Is there a way to delimit my textboxes in a rectangle and give a default height for them ? I tried using style in my <Editor /> but it's not working.

import { Editor } from "react-draft-wysiwyg";
import { EditorState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const TabContent = ({ name, typeProof }) => {
  const [text, setText] = useState(
  () => EditorState.createEmpty(),);    

  return (
    <>
      <SafeAreaView>
        <Editor
          editorState={text}
          onEditorStateChange={setText}
          wrapperClassName="wrapperClassName"
          editorClassName="editorClassName"
          toolbarClassName="toolbarClassName"
          placeholder="Enter your text here:"
          style={{
            height: 200,
            margin: 12,
            borderWidth: 0.5,
            padding: 10,
            borderRadius: "2px"
          }}
          toolbar={{
              options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'embedded', 'remove', 'history'],
         ...
         }}
        />
      </SafeAreaView>     
    </>
  );
};   

Here my code


Solution

  • Maybe you need to use

    editorStyle={{ height: 200, margin: 12,borderWidth: 0.5,padding: 10,borderRadius: "2px" }}

    attribute instead of style

    enter image description here

    enter image description here

    it works for me `