Change the Color of highlighter

[mark7588]

Is there any way to change the color of highlighter dynamically? I have been inspecting codes to apply to my project but I could not find any styling element that sets the color of the highlighter.

[OscarBC]

Check the "./src/style/" files there you'll find the css classes for ".textLayer ::selection" and ".Highlight_part", which sets the highlight color. During selection, and rendering the highlights

[mark7588]

Thanks for letting me know. I am little confused since I have those files in the node_module In the project, I imported this source code as node_module and integrate example_code file into my project folder. Does that mean I need to change style file in the node_module/react-pdf-highlighter?

[OscarBC]

You should define that style in your project, if you implemented the example_code you should have something like the /styles/App.css, there should be a good place to override the default style. In whatever class you implemented the react-pdf-highlighter.

I wouldn’t recommend you to make any changes inside node_modules since those files are managed by npm and your changes can easily be lost.

[mark7588]

I've tried with different approaches but they all failed... The followings are what I tried:

1. Change the CSS style code in node_modules: does not have any effect on color
2. Import components from node_module and import components from my own local folder --> same result as 1
3. Apply style to the imported Highlight component by adding specific className to the component --> same result as 1 Thanks so much for helping me!

[sarcXD]

you could probably do what I did, and say, make a separate folder for the library, clone the project there and install it to set it up. Not exactly the cleanest solution, but if nothing else works this would. You could then make any changes you require. How viable this is depends on your use case, but if nothing else works, this would.

[Grabdone]

There is no need for cloning the project. You just need to copy the below files to your project, you will find these files in your node modules. import these files where you are using the PdfHighlighter component like this import "./style/AreaHighlight.css"; import "./style/Highlight.css"; import "./style/Highlighter.css" import "./style/MouseSelection.css"; import "./style/pdf_viewer.css"; import "./style/Tip.css";

Now you can edit these files to override the css of react-pdf-highlighter.