remove all inherited css properties-CodePudding

I have a popup that will be added to websites via javascript. I have no clue on what sort of styles will be applied on these websites.

Example website has the current styles added:

h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}

My Popup which is added to the body of the website has:

 PopupText = styled.h3`
  font-size: 16px;
  color: black;
`;

This means that font size and color are what i've declared but the border will be added regardless, is there any way to remove the added extra css properties, or to protect from additional styling added by the website?

To sum up, I want my popup to look the same, no matter where it is added. As of right now, when i add it to a website it changes depending on what styling is on the website

CodePudding user response：

You can use all attribute like this :

.class {
  all: unset;
}

Check it here

CodePudding user response：

I think you need use iframe tag for wrap

CodePudding user response：

You can use the :not() selector to achieve that: If your popup element has a class (which is probably the case) you can modify your regular css rule for h3 as follows:

*:not(.yourpopupclass) h3 {
  color: blue;
  border: 5px solid red;
  font-size: 24px;
}

This will affect any h3 element that is a child element of anything (i.e. also of body), except if it's a child of an element that has class .yourpopupclass (i.e. is inside your popup).

The same woud be possible with an ID if the popup has no class, but an ID.