Embedded React + JSS component: how to protect generic elements like <button>, <p> from getting including page's style?

Very simple, use all: unset

.react-root {
  all: unset;
}

You can try adding an additional class to all of the HTML elements outside of your React component. Start your component's code with this and after that proceed with your current work.

First you need to make a list of all the document's elements:

var allElements = document.querySelectorAll( '*' );

Then add the new class to all those elements:

for (var i = 0; i < allElements.length; i++) {
    allElements[i].classList.add('newclassName');
}

Now all elements from the page where your React component will be embedded should have an additional class that will stop your styles to override the original ones.