简体繁体 English

React 作用域样式表

[英]React scoped stylesheets

原文 2017-11-01 17:42:23 6 1 css/ twitter-bootstrap/ reactjs/ create-react-app

I have an application that I am building.我有一个正在构建的应用程序。 I have built both a back and front end in static html.我在静态 html 中构建了后端和前端。 These have both been built from paid templates online but both depend on different versions of bootstrap 3 & 4.这些都是从在线付费模板构建的，但都依赖于不同版本的引导程序 3 和 4。

I have started building a React app off the react-create-app starter but have hit a dead end in getting my html to style correctly.我已经开始从 react-create-app starter 构建一个 React 应用程序，但是在让我的 html 正确设置样式方面遇到了死胡同。

Is there a way to scope css to components so that it is only added into the dom when the component is rendered?有没有办法将 css 范围限定到组件，以便仅在呈现组件时将其添加到 dom 中？ I have created the concept of a FRONTEND and BACKEND component these components wrap pages.我创建了 FRONTEND 和 BACKEND 组件的概念，这些组件包装页面。 In these components I have tried modifying the HEAD tag to add/remove style sheets which does work but leaves broken html for a second while the page renders.在这些组件中，我尝试修改 HEAD 标记以添加/删除样式表，该样式表确实有效，但在页面呈现时会留下损坏的 html 一秒钟。

Any ideas?有任何想法吗？ I've been stuck on this one most of the day.我一天中的大部分时间都被困在这个问题上。

1 个解决方案

I highly recommend against what you are doing.我强烈建议反对你正在做的事情。 But if you really must, you can put each component in a separate iframe to separate the css and use one redux store to feed data into both iframes and keep them in sync.但是如果你真的必须，你可以把每个组件放在一个单独的iframe来分隔 css，并使用一个 redux store 将数据提供给两个 iframe 并保持它们同步。