Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

137
Views
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

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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 `

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!