Increase specificity of css selectors

[jadami10]

trafficstars

When adding react-diff-viewer into my application, it comes out looking like this.

This is specifically because the bootstrap css for pre is overriding all of the css in this component.

Bootstrap

pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

component

.css-rq9a2a-diff-removed {
    background: #ffeef0;
    background-image: initial;
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: rgb(255, 238, 240);
    color: #24292e;
}

There's really no way for me to "unapply" the bootstrap css, so I'm curious if the component's css could be made more specific (specifically to include pre and span tags) where necessary to avoid these overrides.

For now I plan to use wildcard selectors and effectively copy over the existing css but with more specific selectors.