在具有仪表板和登陆的React应用程序中处理CSS样式冲突的最佳方法是什么？

Question

I'm not really into styling, I'm a programmer, so maybe I'm doing something wrong but I can't figure out how to deal with this problem: I have a SPA on reactjs which has admin dashboard and a landing page. 我不是真正的造型，我是程序员，所以也许我做错了但是我无法弄清楚如何处理这个问题：我有一个SPA on reactjs有管理仪表板和登陆页面。 Depending on whether user is logged in or not, different module is rendered on the same domain and url. 根据用户是否登录，在同一域和URL上呈现不同的模块。 The index.html page is very simple: index.html页面非常简单：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>

</head>
<body>

<div id="app">
</div>
</body>
</html>

There's a session check in index.js, and if user is logged in Dashboard is rendered to the app div instead of Landing. 在index.js中有一个会话检查，如果用户登录，则会将Dashboard呈现给app div而不是Landing。 I didn't create dashboard style myself, I took a bootstrap template from the Internet with it's custom styles of course. 我自己没有创建仪表板样式，当然我从互联网上带了一个自定义样式的bootstrap模板。 I also have styles.scss file with the following contents: 我还有styles.scss文件，其中包含以下内容：

@import "./custom";
@import "./font-awesome";
@import "./app/admin";
@import "./app/daterangepicker";
@import "./app/nprogress";
@import "./app/skin";
@import "./bootstrap";

This file is imported to index.js. 此文件将导入index.js。 The problem is that dashboard's custom styles conflict with my landing page's (which is also built with bootstrap) css styles. 问题是仪表板的自定义样式与我的登录页面（也是使用bootstrap构建）css样式冲突。

So my first idea was to create 2 scss files with imports, one for dashboard and one for landing. 所以我的第一个想法是用导入创建2个scss文件，一个用于仪表板，一个用于登陆。 But is there any way to attach different css files depending on what part of the application must be rendered and to be able to do it in a conditional statement without reloading the whole page in the browser? 但有没有办法附加不同的CSS文件取决于必须呈现的应用程序的哪个部分，并能够在条件语句中执行它而无需在浏览器中重新加载整个页面？ Or maybe there are some better ideas to get around this problem? 或者也许有一些更好的想法来解决这个问题？

Answer 1

This is generally a hard problem to solve nicely after-the-fact. 这通常是一个很难解决的问题。 These css specificity and shadowing problems have not had nice solutions, in my experience, but you have some options. 根据我的经验，这些css特异性和阴影问题没有很好的解决方案，但你有一些选择。

You can give some top-level component for these two views an additional className based on the page and then scope your scss bundle, or the specific custom styles you need to take precedence, under that class. 您可以根据页面为这两个视图提供一个顶级组件和一个额外的className，然后在该类下为您的scss包或您需要优先的特定自定义样式作范围。 For example, say that app.scss has all the styles: 例如，假设app.scss具有所有样式：

#app {
    // shared styles

    &.landing-page {
        // landing-page specific styles
        .bootstrap-component {
            color: blue;
        }
    }

    &.dashboard {
        // dashboard-specific styles
        .bootstrap-component {
            color: red;
        }
    }
}

A cause of this problem is simply that you have two different custom styles for similar components that use the same classes. 导致此问题的原因很简单，您对使用相同类的类似组件有两种不同的自定义样式。 As best you can, try to be consistent in the UI for a component so that the same component uses the same styles, with minor modifications applied through new classes. 尽可能地，尝试在组件的UI中保持一致，以便相同的组件使用相同的样式，并通过新类进行少量修改。 If that's not possible, maybe there is a different way to approach styling these components: 如果那是不可能的，也许有一种不同的方式来处理这些组件的样式：

The changes to Bootstrap styles shared between the two pages can be made as custom styles to that class but differences in the components' styles should be brought out instead, as modifiers to that component. 两个页面之间共享的Bootstrap样式的更改可以作为该类的自定义样式，但应该引出组件样式的差异，作为该组件的修饰符。 Using the BEM class naming convention really helped me to do this better: brief | 使用BEM类命名约定确实帮助我更好地做到了这一点： brief | more helpful 更有帮助
- For example, if Bootstrap had a header component and both your dashboard and landing page wanted it to be green rather than blue, include that in your changes to bootstrap's styles. 例如，如果Bootstrap有一个标题组件，并且您的仪表板和登录页面都希望它是绿色而不是蓝色，请在您对bootstrap样式的更改中包含该组件。 If the header, however, is smaller on the dashboard page and bigger on the landing page, those changes can be applied by new classes altogether. 但是，如果标题页在仪表板页面上较小而在着陆页上较大，则这些更改可以完全由新类应用。

If the server knows the authentication status beforehand (via some token - which it likely does), you can serve different html pages or different versions of the css. 如果服务器事先知道身份验证状态（通过某些令牌 - 它可能会这样做），您可以提供不同的html页面或不同版本的css。 This kind of combines server-side rendering with some smart css minification. 这种服务器端渲染与一些智能css缩小相结合。 I don't think that's what you're looking for, but is possible depending on the scope of your project. 我认为这不是你想要的，但可能取决于你的项目范围。 I think that the point mentioned about about trying to isolate the shared and unqiue styles to a component is a better route, though. 我认为关于尝试将共享和unqiue样式与组件隔离的提及是一个更好的路径。

在具有仪表板和登陆的React应用程序中处理CSS样式冲突的最佳方法是什么？

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-07-05 03:40:54

在具有仪表板和登陆的React应用程序中处理CSS样式冲突的最佳方法是什么？

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-07-05 03:40:54

解决方案1
1 已采纳 2017-07-05 03:40:54