react中樣式?jīng)_突

by Vinh Le

由Vinh Le

如何通過React中的樣式使您的應(yīng)用漂亮 (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.

當(dāng)涉及到React中的樣式時，有太多的方法和技術(shù)選擇可以美化您的Web應(yīng)用程序。 但是，根據(jù)我的個人經(jīng)驗，它實際上取決于應(yīng)用程序的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庫，選擇其中的一個，您就很高興了”，那么您可能還沒有經(jīng)歷過在這些庫中配置預(yù)樣式化組件的痛苦經(jīng)歷。

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.

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

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樣式替代方法，更重要的是，嘗試在何時使用它們時進(jìn)一步向您詳細(xì)說明。

為什么要造型？ (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.

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

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生態(tài)系統(tǒng)的新手，那么您的第一篇教程可能會教您如何啟動項目，向您展示如何管理狀態(tài)和處理道具。 樣式僅在在線課程的第一部分中提到過，因此在您的第一個應(yīng)用程序中很少使用。

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.

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

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.

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

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:

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

• 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存在嗎？ 幫助我們創(chuàng)建動態(tài)UI。 更完善的用戶界面有助于改善用戶體驗。 結(jié)果，如果我們將自己放在用戶的鞋子上，我們就會簡單地意識到吸引人的設(shè)計是用戶友好應(yīng)用程序的必要組成部分。

• 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.

  良好的開發(fā)環(huán)境 -尤其是在進(jìn)行副項目時。 如果一個好的設(shè)計使您喜歡它，那么使用以設(shè)計為先的方法開發(fā)應(yīng)用程序可能會獲得更多啟發(fā)。 同樣，這來自事物的美學(xué)方面。 如果您只是想讓它工作，那可能對您不適用。

• 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.

  避免樣式設(shè)置過后不堪重負(fù) -想象一下，當(dāng)您在一個項目上工作了一段時間后，突然回頭想一想您需要進(jìn)行多少樣式設(shè)置。 如果這只是一個沙盒項目，那就很好。 但是，如果您的應(yīng)用程序需要多層容器和元素，并且必須具備響應(yīng)能力，那么未來將需要進(jìn)行大量工作。

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

那我應(yīng)該怎樣使我的React應(yīng)用看起來不錯呢？

內(nèi)聯(lián)樣式 (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:

這種方法是最簡單的啟動方法，因為它不需要配置，您可以立即看到結(jié)果。 但是，即使您熟悉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.

  內(nèi)聯(lián)樣式是由任何DOM元素中的style屬性完成的，它具有對象類型，其中key是常規(guī)CSS屬性，而value是等效CSS值。

• Because there is no dash like many CSS properties, you should notice capitalization such as: backgroundColor, backgroundImage, textAlign, and flexDirection.

  因為沒有像許多CSS屬性那樣的破折號，所以您應(yīng)該注意大寫，例如： backgroundColor ， backgroundImage ， textAlign和flexDirection 。

• It is more well-organized when you define a distinctive variable storing all styling logic:
  當(dāng)您定義一個存儲所有樣式邏輯的獨(dú)特變量時，它組織得更好：

const styles = { alertMessage: { color: 'red' }, ... // other styling rule};...<span style={styles.alertMessage}>Unknown error</span>

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

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

優(yōu)點(diǎn) (Pros)

• Easy to apply, non-configuration.
  易于應(yīng)用，無需配置。

缺點(diǎn) (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.
  當(dāng)您的項目變得更復(fù)雜時，您JavaScript文件將變得更加混亂和漫長。 一種方法是在外部JavaScript文件中定義樣式變量，然后將其重新導(dǎo)入。 但是，這確實需要一個額外的步驟，并且與下面的以下樣式方法相比，變得更加難以使用。
• 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.
  應(yīng)用程序的重新加載導(dǎo)致開發(fā)速度降低。 如果您使用諸如create-react-app之類的工具，則您的應(yīng)用會在每次進(jìn)行更改時熱加載。 否則，您必須手動重新加載頁面以查看更改。 因此，根據(jù)您應(yīng)用程序的復(fù)雜性，重新渲染將花費(fèi)更長的時間。

什么時候使用？ (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.

剛開始學(xué)習(xí)React時，是最合適的時間采用這種方法。 此外，如果您的項目很小，或者您只想在應(yīng)用程序頂部應(yīng)用一些較小的樣式。 例如，響應(yīng)能力并不是很關(guān)鍵。 然后可以使用內(nèi)聯(lián)樣式。

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:
  創(chuàng)建CSS文件并將其導(dǎo)入JavaScript文件：

import ‘./App.css’;

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

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

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

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

• Followed by your styling rules:
  遵循您的樣式規(guī)則：

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

• Conditional styling by setting equivalent class name:
  通過設(shè)置等效的類名進(jìn)行條件樣式設(shè)置：

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

優(yōu)點(diǎn) (Pros)

• Write CSS rules that you’re familiar with, less risk of making typos.
  編寫您熟悉CSS規(guī)則，減少輸入錯誤的風(fēng)險。
• Benefits from CSS features such as variables and media queries.
  受益于CSS功能，例如變量和媒體查詢。
• Well-organized project structure.
  組織良好的項目結(jié)構(gòu)。

• 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.

  更高的開發(fā)速度 -這也許是我在開發(fā)中所經(jīng)歷過的最愉快的時光。 在CSS文件中進(jìn)行更改時，不會重新呈現(xiàn)您的應(yīng)用程序。 因此，您的更新將需要一秒鐘才能顯示在屏幕上。 您的應(yīng)用程序越大，越復(fù)雜，就可以節(jié)省更多不必要的重新加載時間，從而獲得更多的樂趣。

缺點(diǎn) (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.

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

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

如果您的應(yīng)用程序越來越大且具有更復(fù)雜的設(shè)計系統(tǒng)，請考慮檢查SCSS與CSS相比的優(yōu)勢。

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并不能真正改變游戲規(guī)則，它可以為您提供CSS不能帶來的所有好處。 最近，諸如變量之類的嶄新功能將使CSS及其預(yù)處理器之間的差距最小化。 此外，如果您以前沒有使用過SCSS，則需要花費(fèi)一些時間來熟悉它。

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的所有熟悉度和好處，以及許多非常有用的功能，才能構(gòu)成一個很好的程序包。 如果您不熟悉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應(yīng)用程序中使用SCSS，它確實需要一些配置。 如果您使用的是create-react-app，則該指南可能會對您有所幫助。

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

接下來，讓我向您展示SCSS的優(yōu)點(diǎn)，它使它比普通CSS優(yōu)越。

套料 (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:

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

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?

例如，通過這種結(jié)構(gòu)，您想要更改intro容器內(nèi)的子元素的樣式。 您現(xiàn)在需要做的就是找到它的類名，在這種情況下，該類名是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帶給表的最大好處之一就是定義媒體查詢中的斷點(diǎn)。 讓我們看一下這個例子：

_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.scssbody { 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中更加自然和容易。 當(dāng)您對一個元素應(yīng)用樣式規(guī)則時，就可以清楚地看到其在其他視口中的外觀。 因此，由于人們通常在CSS文件末尾定義媒體查詢，因此可以直接進(jìn)行更改和調(diào)整，而無需在CSS中向上滾動。

遺產(chǎn) (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極為有用。 假設(shè)您要為2個按鈕應(yīng)用相似的背景和邊框，除了其中一個具有紅色文本顏色，另一個具有藍(lán)色文本顏色：

// 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:

讓我們總結(jié)一下SCSS的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn) (Pros)

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

缺點(diǎn) (Cons)

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

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.

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

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

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

安裝 (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.

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

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

假設(shè)我們要創(chuàng)建一個按鈕：

App.jsimport { 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.

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

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.

就像這樣，您幾乎可以使用庫中的所有組件。 使用它的優(yōu)點(diǎn)是表面經(jīng)過拋光和現(xiàn)代的材料設(shè)計。 如果您想自己創(chuàng)建一個組件，則可能需要花費(fèi)大量的工作，并且最終結(jié)果可能甚至不如預(yù)樣式化的組件。

那么，為什么我們不都使用它呢？ (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.

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

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.

定制這些組件的一種方法是在大多數(shù)情況下通過樣式道具覆蓋其樣式。 另一種方法是給它一個類名，并通過CSS編寫自己的樣式。 在這種情況下，如果您CSS完全有效，但是您的組件完全沒有變化，請記住在規(guī)則后面加上!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方面，仍然擁有一個外觀漂亮的應(yīng)用程序。

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.

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

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中進(jìn)行樣式設(shè)置的流行方法。 當(dāng)然，還有許多其他很棒的庫和技巧。 請在評論部分中分享您的意見。 隨著React社區(qū)變得越來越大，我們可以期待越來越多的“后起之秀”。

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 :)

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

謝謝閱讀！ (Thanks for reading!)

在社交媒體上問好： Facebook ， Twitter ， LinkedIn或我的個人網(wǎng)站 。 (Say hello on Social Media: Facebook, Twitter, LinkedIn, or my personal site.)

請繼續(xù)關(guān)注即將到來的技術(shù)博客？ ？ ？ (Stay tuned for upcoming tech blogs ? ? ?)

再見！ (See you soon!)

翻譯自: https://www.freecodecamp.org/news/styling-in-react-101-2536b696219b/

react中樣式?jīng)_突

總結(jié)

以上是生活随笔為你收集整理的react中样式冲突_如何通过React中的样式使您的应用漂亮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。