如何在React App中排除全局样式? [英] How to exclude global styles in a React App?

问题描述

我正在使用材料UI 来构建我的React项目.

I am using Material UI for building my React Project.

但是，必须将某个组件嵌入到其他站点.意思是，我正在提供此组件的生产版本，以将其嵌入到其他站点.

However there is a component which has to be embedded to a different site. Meaning, I am providing the production build of this component to embed it to a different site.

我的 React应用的CSS 被该网站中定义的全局样式覆盖.

My React app's css is getting overridden by the global styles defined in that website.

我不想要这种行为.有什么办法可以隔离我的React应用程序的CSS和其他网站的全局CSS.

I don't want this behaviour. Is there any way I can isolate the css of my react app and the global css of the other website.

我看到了这个问题，但是解决方案对我没有帮助.

I saw this question but the solutions didn't help me.

推荐答案

如果无法使用iframe和Web组件，则唯一剩下的选择是CSS重置.

If iframes and Web Components are out of the question, the only remaining option is CSS resets.

创建一个CSS类和一系列规则，以重置该类中出现的任何元素的样式.

Create a CSS class and a series of rules that reset the styles of any elements that occur inside that class.

.my-reset {
  /* Global resets (e.g. font family) */
}

.my-reset p {
  /* Reset paragraph styles */
}

.my-reset label {
  /* Reset label styles */
}

/* etc. */

将该类应用于根级组件:

Apply that class to the root-level component:

function MyApp() {
    <div className="my-reset">
        { /* app goes here */ }
    </div>
}

那里有很多CSS重置库.由于您无法控制全局样式，因此必须对重置进行繁重的操作.因此，如果有可能，请使您的组件可作为iframe嵌入.

There are plenty of CSS reset libraries out there. Since you have no control over global styles, you're going to have to be heavy handed with the resets. So if it's at all possible, make your component embeddable as an iframe.

这篇关于如何在React App中排除全局样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！