CODEWITHSUNDEEP
reactjsdraftjs
Ashish Kamble
Ashish Kamble

Reputation: 2627

How to set button color with changing font family styles in draft.js

I have Editor like this with three buttons and text area, How can i set button bg color: grey with changing font text styles,

<Col>
    <span className = ""></span>
    <div>
    <button onMouseDown = { e => { _onUnderlineClick(e) } }>U</button>
    <button onMouseDown = { e => { _onBoldClick(e)} }>B</button>
    <button onMouseDown = { e => { _onItalicClick(e)} }><em>I</em></button>
    </div>
    <Editor editorState={editorState}
        onChange={onEnterText} handleBeforeInput={handleBeforeInput} handlePastedText={handlePastedText} handleKeyCommand={handleKeyCommand} keyBindingFn={keyBindingFn}
        readOnly = {e}
    />
</Col>

DraftJS

button color must chnage while clicking on button, as well as with backspace when draftJS text style get changed dynamically, wthat time as well

Upvotes: 0

Views: 471

Answers (1)

salik saleem
salik saleem

Reputation: 847

you can use state variable for styling and when your event handler called .you can change your state and this will automatically chnage style of your buttons. so for example. you want to chnage the style of button dynamically.

const [btnSty,setSty]=useState("property value")//set default propert value
const handleMouse=()=>{
setSty("set here")//property you want to set dynamically
}
<button onMouseDown = {handleMouse} style={{anyProperty:{btnSty}}>B</button>

Upvotes: 1

Related Questions