react中樣式沖突

by Vinh Le

由Vinh Le

如何通過React中的樣式使您的應用漂亮 (How to make your apps pretty with styling in React)

When it comes to styling in React, there are just so many ways and choices of technologies to beautify your web app. Nonetheless, based on my personal experience, it really depends on the UI requirements of your app to decide which to go with.

當涉及到React中的樣式時，有太多的方法和技術選擇可以美化您的Web應用程序。但是，根據我的個人經驗，它實際上取決于應用程序的UI要求來決定要使用哪個。

太容易了嗎？ (Is it too easy?)

If you stop here and say: “It is easy! Just Google to find out top React UI libraries, pick one of them, and you’re good to go”, then you perhaps have not gone through painful experiences configuring pre-styled components in those libraries.

如果您在這里停下來說：“很容易！只是Google找出了最佳的React UI庫，選擇其中的一個，您就很高興了”，那么您可能還沒有經歷過在這些庫中配置預樣式化組件的痛苦經歷。

The more time you work on something, the more familiar you are and the less time you need to spend troubleshooting. Styling in React is not an exception. However, it truly requires a decent amount of time, at least for me as a self-taught developer, to be able to make a wise choice.

您從事某項工作的時間越多，您就越熟悉，并且花費在故障排除上的時間也就越少。 React中的樣式也不例外。但是，這確實需要相當長的時間，至少對于我這個自學成才的開發人員而言，才能夠做出明智的選擇。

Therefore, my main purposes on this article is to quickly introduce best React styling alternatives and more importantly, try to further elaborate to you when you should use which.

因此，我在本文中的主要目的是快速介紹最佳的React樣式替代方法，更重要的是，嘗試在何時使用它們時進一步向您詳細說明。

為什么要造型？ (Why styling?)

Another dead simple question, isn’t it? Well, if I alter that question a tiny bit: “Why learn styling right when you start learning React?”, it might perhaps activate your thought flow.

另一個死的簡單問題，不是嗎？好吧，如果我稍微改變一下這個問題：“為什么在開始學習React時為什么要正確學習樣式？”，它也許會激活您的思想流程。

If you are a newcomer to React ecosystem, your very first tutorials probably teach you how to start a project, show you how to manage states and handle props. Styling is merely mentioned in the first sections of online courses and therefore minimally used in your very first apps.

如果您是React生態系統的新手，那么您的第一篇教程可能會教您如何啟動項目，向您展示如何管理狀態和處理道具。樣式僅在在線課程的第一部分中提到過，因此在您的第一個應用程序中很少使用。

Before I sound over-serious to you, let me tell you that “It is entirely fine.” There is absolutely nothing wrong with how you are doing. On the other hand, it is even better if you put styling aside at the beginning to focus more on logic and functionalities of the app.

在我對您聽起來過分認真之前，讓我告訴您“這完全沒問題。” 你的表現絕對沒有錯。另一方面，如果您一開始就將樣式放在一旁，而將重點更多地放在應用程序的邏輯和功能上，那就更好了。

However, if you do care about the aesthetics of your work from the very beginning, then you are probably not totally satisfied with your functional but minimally styled app.

但是，如果您從一開始就關心您的作品的美觀性，那么您可能對功能強大但樣式簡約的應用并不完全滿意。

Okay, enough words. Let me summarize the benefits of styling your app, either from your very first “Hello world” or a project that you are in the middle of:

好吧，足夠的話。讓我總結一下，從您的第一個“ Hello world”到您正在從事的項目中，設計應用程序樣式的好處：

Beautiful user interface at start — remember why React exists? To help us create dynamic UI. A more polished user interface contributes to a better user experience. As a result, if we put ourselves in the users’ shoes, we simply realize that appealing design is an imperative part of a user-friendly application.
開始時漂亮的用戶界面 -還記得為什么React存在嗎？幫助我們創建動態UI。更完善的用戶界面有助于改善用戶體驗。結果，如果我們將自己放在用戶的鞋子上，我們就會簡單地意識到吸引人的設計是用戶友好應用程序的必要組成部分。
Good development environment — especially when you are working on your side project. If a good design makes you enjoy using it, you will perhaps have more inspiration for developing an app with a design-first approach. Again, this comes from the aesthetic sides of things. If you are the one who just want it to work, this might not be applicable for you.
良好的開發環境 -尤其是在進行副項目時。如果一個好的設計使您喜歡它，那么使用以設計為先的方法開發應用程序可能會獲得更多啟發。同樣，這來自事物的美學方面。如果您只是想讓它工作，那可能對您不適用。
Avoidance of styling overwhelm later on — imagine when you have worked on a project for a while and suddenly look back to think about how much you are going to need to do styling. If it is just a sandbox project, then it’s perhaps fine. But if your app requires multiple layers of containers and elements, and responsiveness is a must, then it would be quite a big amount of work ahead.
避免樣式設置過后不堪重負 -想象一下，當您在一個項目上工作了一段時間后，突然回頭想一想您需要進行多少樣式設置。如果這只是一個沙盒項目，那就很好。但是，如果您的應用程序需要多層容器和元素，并且必須具備響應能力，那么未來將需要進行大量工作。

Then what should I use to make my React app look good?

那我應該怎樣使我的React應用看起來不錯呢？

內聯樣式 (Inline styling)

This approach is the easiest way to start as it requires non-configuration and you can instantly see the result. However, even if you are familiar with CSS, be aware of typos as they might cause you headaches:

這種方法是最簡單的啟動方法，因為它不需要配置，您可以立即看到結果。但是，即使您熟悉CSS，也要注意拼寫錯誤，因為它們可能使您頭痛：

<div style={{ width: 50, height: 50, background: '#000'}}>    I am a square box with black background</div>

外賣 (Takeaways)

Inline styling is done by the style property in any DOM element, it has an object type, in which key is a normal CSS property, and value is the equivalent CSS value.
內聯樣式是由任何DOM元素中的style屬性完成的，它具有對象類型，其中key是常規CSS屬性，而value是等效CSS值。
Because there is no dash like many CSS properties, you should notice capitalization such as: backgroundColor, backgroundImage, textAlign, and flexDirection.
因為沒有像許多CSS屬性那樣的破折號，所以您應該注意大寫，例如： backgroundColor ， backgroundImage ， textAlign和flexDirection 。
It is more well-organized when you define a distinctive variable storing all styling logic:
當您定義一個存儲所有樣式邏輯的獨特變量時，它組織得更好：

const styles = {  alertMessage: { color: 'red' },  ... // other styling rule};...

<span style={styles.alertMessage}>Unknown error</span>

You can do conditional styling. For example:
您可以執行條件樣式。例如：

<span    style={{ color: this.state.isWarning ? ‘red’ : ‘black’  }}>   Let’s see if I am a warning </span>. </span>

優點 (Pros)

Easy to apply, non-configuration.
易于應用，無需配置。

缺點 (Cons)

Your JavaScript files will get messier and longer when your project gets more complex. One way to do it is to define style variables in an external JavaScript file and import them back. However, this does requires an extra step and becomes more difficult to use compared with following styling methods below.
當您的項目變得更復雜時，您JavaScript文件將變得更加混亂和漫長。一種方法是在外部JavaScript文件中定義樣式變量，然后將其重新導入。但是，這確實需要一個額外的步驟，并且與下面的以下樣式方法相比，變得更加難以使用。
Lower speed of development caused by app’s reloading. If you use tools like create-react-app, your app will hot-reload every time you make changes. Otherwise, you have to manually reload your page to see changes. Therefore, depending on the complexity of your app, it will take a gradually longer amount of time just for re-rendering.
應用程序的重新加載導致開發速度降低。如果您使用諸如create-react-app之類的工具，則您的應用會在每次進行更改時熱加載。否則，您必須手動重新加載頁面以查看更改。因此，根據您應用程序的復雜性，重新渲染將花費更長的時間。

什么時候使用？ (When to use?)

When you first started learning React would be the most appropriate time to pick up this approach. Besides, if your project is small or you just want to apply some minor styling on top of your app. Responsiveness, for instance, is not really critical. Then inline styling is good to go.

剛開始學習React時，是最合適的時間采用這種方法。此外，如果您的項目很小，或者您只想在應用程序頂部應用一些較小的樣式。例如，響應能力并不是很關鍵。然后可以使用內聯樣式。

CSS (CSS)

Okay, no more weird CSS-in-JS. Here is original CSS that you’ve loved :), only a simple configuration before you start:

好的，不再有怪異CSS-in-JS。這是您喜歡的原始CSS :)，在開始之前只有一個簡單的配置：

Create your CSS file and import it into a JavaScript file:
創建CSS文件并將其導入JavaScript文件：

import ‘./App.css’;

Add className to the element that you want to apply a style to:
將className添加到要向其中應用樣式的元素：

<p className=’warning-message’>Warning</p>

Notice that it is now className, not normal class — just a typical React thingy.

請注意，它現在是className ，而不是普通類 - 只是一個典型的React whaty。

Followed by your styling rules:
遵循您的樣式規則：

App.css.warning-message { color: red;}

Conditional styling by setting equivalent class name:
通過設置等效的類名進行條件樣式設置：

<p   className={this.state.warning ? ’warning-message’ : ‘normal-message’}>Warning</p>

優點 (Pros)

Write CSS rules that you’re familiar with, less risk of making typos.
編寫您熟悉CSS規則，減少輸入錯誤的風險。
Benefits from CSS features such as variables and media queries.
受益于CSS功能，例如變量和媒體查詢。
Well-organized project structure.
組織良好的項目結構。
Higher development speed — this is perhaps the most enjoyable upside that I’ve experienced in development. When you make changes in your CSS files, your app will not be re-rendered. Therefore, it will take a second for your updates to display on the screen. The bigger and more complex your app is, the more pleasure you will feel saving those unnecessary reloading time.
更高的開發速度 -這也許是我在開發中所經歷過的最愉快的時光。在CSS文件中進行更改時，不會重新呈現您的應用程序。因此，您的更新將需要一秒鐘才能顯示在屏幕上。您的應用程序越大，越復雜，就可以節省更多不必要的重新加載時間，從而獲得更多的樂趣。

缺點 (Cons)

Missing features compared to SCSS, which I will dive into right after this.
與SCSS相比缺少的功能，在此之后我將深入探討。

什么時候使用？ (When to use?)

You can use CSS from the beginning, regardless of your app’s size. As it is almost zero-configuration and CSS is perhaps familiar with many, it is easy to quickly start.

無論您的應用大小如何，都可以從一開始就使用CSS。由于幾乎是零配置，并且CSS可能很熟悉，所以很容易快速啟動。

If your app is getting bigger and having an even more complex design system, consider checking benefits of SCSS over CSS.

如果您的應用程序越來越大且具有更復雜的設計系統，請考慮檢查SCSS與CSS相比的優勢。

Nonetheless, keep in mind that you’ll be totally fine with pure CSS. SCSS is not really a game-changer that offers you all benefits that you would not get out of CSS. Recently, brand new features like variables are coming to minimize the gap between CSS and its preprocessors. Besides, if you have not used SCSS before, it will does take some times to familiarize with it.

盡管如此，請記住，使用純CSS將會完全沒問題。 SCSS并不能真正改變游戲規則，它可以為您提供CSS不能帶來的所有好處。最近，諸如變量之類的嶄新功能將使CSS及其預處理器之間的差距最小化。此外，如果您以前沒有使用過SCSS，則需要花費一些時間來熟悉它。

SCSS (SCSS)

This is perhaps my go-to choice for React styling. It takes all familiarity and benefits of CSS plus a number of very useful features to make a great package. If you are not familiar with SCSS, they have awesome docs for you to check out.

這也許是我對React樣式的首選。它需要CSS的所有熟悉度和好處，以及許多非常有用的功能，才能構成一個很好的程序包。如果您不熟悉SCSS，他們會提供很棒的文檔供您檢查。

In order to make use of SCSS in your React app, it does require a few configurations, though. If you are using create-react-app, this guideline might be helpful for you.

為了在您的React應用程序中使用SCSS，它確實需要一些配置。如果您使用的是create-react-app，則該指南可能會對您有所幫助。

Next, let me show you the benefits of SCSS that makes it a superior choice compared with normal CSS.

接下來，讓我向您展示SCSS的優點，它使它比普通CSS優越。

套料 (Nesting)

When your project gets bigger, the chance is highly likely that your CSS files are going to be full of class names. Things get even more daunting when your design consists of nested blocks, containers and elements. Finding a particular class name somewhere in a hundreds-line file is thus tiring and time-consuming. Here is where nesting comes in handy:

當您的項目變大時，您CSS文件很有可能充滿類名。當您的設計由嵌套的塊，容器和元素組成時，事情變得更加艱巨。因此，在數百行文件中的某個位置查找特定的類名稱會很累并且很費時間。這是嵌套派上用場的地方：

App.scss.intro-container {  h1 { font-size: 20px };  .nested-child {    display: block;    p {      margin: 0;    }  }}

With this structure, for instance, you want to change style of a child element inside your intro container. All you need to do right now is to find its class name, which is intro-container in this case. Then all styles of its children could be found inside it. Much easier, isn’t it?

例如，通過這種結構，您想要更改intro容器內的子元素的樣式。您現在需要做的就是找到它的類名，在這種情況下，該類名是intro-container 。然后可以在其中找到所有樣式的子項。容易得多，不是嗎？

混合蛋白 (Mixins)

One of the greatest benefits that mixins bring to the table is to define breakpoints in media queries. Let’s take a look at this example:

mixins帶給表的最大好處之一就是定義媒體查詢中的斷點。讓我們看一下這個例子：

_mixins.scss

// define breakpoint for mobile device  @mixin bp-mobile {    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {      @content;    }  }

Back in the main SCSS file:

返回主SCSS文件：

App.scss

body {  width: 60%; margin: 0 auto;  @include bp-mobile {    width: 90%;  }}

Compared to:

相比：

App.css

// set width of the body to 90% only in mobile devicesbody {  width: 60%; margin: 0 auto;}...@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {  body {    @include bp-mobile {      width: 90%;    }  }}

I believe that it is much more natural and easier in SCSS. As when you apply styling rules for one element, you have a clear view of how it looks in other viewports. Therefore, changes and adjustments are made directly without the burden of scrolling up in CSS as people normally define media queries at the end of CSS file.

我相信這在SCSS中更加自然和容易。當您對一個元素應用樣式規則時，就可以清楚地看到其在其他視口中的外觀。因此，由于人們通常在CSS文件末尾定義媒體查詢，因此可以直接進行更改和調整，而無需在CSS中向上滾動。

遺產 (Inheritance)

This is extremely helpful in making your code DRY. Let’s say if you want to apply similar background and border for 2 buttons, except one of them has red text color and the other has blue one:

這對于使代碼DRY極為有用。假設您要為2個按鈕應用相似的背景和邊框，除了其中一個具有紅色文本顏色，另一個具有藍色文本顏色：

// define common rules%button-common {  background: #fff;  border: 1px solid gray;  border-radius: 3px;}

.button-red {  @extend %button-common; color: ‘red’;}

.button-blue {  @extend %button-common; color: ‘blue’;}

Let’s summarize pros and cons of SCSS:

讓我們總結一下SCSS的優缺點：

優點 (Pros)

Basically all pros from CSS plus distinctive features that make people love SCSS.
基本上，所有來自CSS的專家以及使人們喜歡SCSS的獨特功能。

缺點 (Cons)

Requires configuration to use.
需要配置才能使用。
Does take a certain amount of time to learn for folks who are not familiar with SCSS.
對于不熟悉SCSS的人來說，確實需要花費一些時間來學習。

React UI庫 (React UI Libraries)

Thanks to the thriving of the open-source community, there are awesome React UI libraries that you can take into use in your projects. Excellent resources are MaterialUI, React-Bootstrap… to name but a few.

感謝開源社區的興旺發展，您可以在項目中使用很棒的React UI庫。優秀的資源是MaterialUI ， React-Bootstrap …等等。

Let’s take MaterialUI, one of the most popular libraries, as a demo:

讓我們以最受歡迎的庫之一MaterialUI為例進行演示：

安裝 (Installation)

npm install @material-ui/core

In order to use this, you have to rely heavily on its documentation, which is drafted nicely and designed in, well, the Google material way. However, if you look at a code sample for its components, it is kind of daunting. My way is to just import the component that you want to use, notice some important props, and customize it later.

為了使用它，您必須嚴重依賴于它的文檔，該文檔起草得很好，并且以Google的實質性方式設計。但是，如果您查看其組件的代碼示例，這會令人望而生畏。我的方法是只導入要使用的組件，注意一些重要的道具，并在以后對其進行自定義。

Let’s say if we want to create a button:

假設我們要創建一個按鈕：

App.js

import { Button } from ‘@material-ui/core’;...

<Button  color=’primary’  onClick={() => console.log(‘clicked’)}  fullWidth> View </Button>

Boom! A button with label “View”, blue color, having a width value equal to the one of its parent container, appears nicely on the screen.

繁榮！屏幕上會很好地顯示一個帶有標簽“ View”(藍色)的按鈕，其寬度值等于其父容器的寬度。

Just like this, you can pretty much get use of all components in the library. The advantage of using it is an apparently polished and modern material design. If you want to create a component on your own, it will perhaps take a good amount of work and your final result might not even look as good as pre-styled components.

就像這樣，您幾乎可以使用庫中的所有組件。使用它的優點是表面經過拋光和現代的材料設計。如果您想自己創建一個組件，則可能需要花費大量的工作，并且最終結果可能甚至不如預樣式化的組件。

那么，為什么我們不都使用它呢？ (So why don’t we just all use this?)

First of all, if making it appear on the screen seems to be super easy, customizing and making it perfectly fit into your design system is absolutely not an easy task.

首先，如果使它出現在屏幕上似乎超級簡單，那么自定義并使之完全適合您的設計系統絕對不是一件容易的事。

One way to customize those components is to override its style, most of the time through style prop. Another way is to give it a class name, and write its own style by CSS. In this case, if your CSS is totally valid but your component does not change at all, remember to put !important after your rules.

定制這些組件的一種方法是在大多數情況下通過樣式道具覆蓋其樣式。另一種方法是給它一個類名，并通過CSS編寫自己的樣式。在這種情況下，如果您CSS完全有效，但是您的組件完全沒有變化，請記住在規則后面加上!important 。

那么什么時候使用React UI庫呢？ (So when would you use React UI libraries?)

If you are working on a side project which is small, libraries like MaterialUI are nice to use. As you’ll only have to focus on the JavaScript side of things and still have a pretty nice-looking app.

如果您正在做一個很小的副項目，那么像MaterialUI這樣的庫就很好用了。因為您只需要專注于JavaScript方面，仍然擁有一個外觀漂亮的應用程序。

However, when you plan to make a complex app with nested layers of UI, do notice that sometimes it might be even faster to create your own reusable components than try to customize pre-styled ones. In my personal experience, if you really need particular components where they are so difficult to style or make them behave like what you wish, then you take them into use. Otherwise, it is better to create your own and take full advantage of your control over them.

但是，當您計劃使用嵌套的UI層制作復雜的應用程序時，請注意，有時創建自己的可重用組件比嘗試自定義預先樣式化的組件更快。以我個人的經驗，如果您確實需要特殊的組件，而這些組件很難樣式化或使其表現出所需的效果，則可以使用它們。否則，最好創建自己的并充分利用對它們的控制權。

So, here they are, popular ways to style in React. Of course, there are still many other great libraries and hacks out there. Please share yours down bellow in the comment section. As the React community is growing bigger and bigger, we can expect an even increasing number of “rising stars”.

因此，這里是在React中進行樣式設置的流行方法。當然，還有許多其他很棒的庫和技巧。請在評論部分中分享您的意見。隨著React社區變得越來越大，我們可以期待越來越多的“后起之秀”。

Furthermore, awesome maintainers and developers of current open-source libraries will only try to make their solutions better, more polished, and easier to use. Those all signify a bright future ahead :)

此外，當前開放源代碼庫的優秀維護者和開發人員將僅嘗試使他們的解決方案更好，更精巧并且更易于使用。這些都預示著光明的未來：)