react黑色风格ui_情绪化的React风格

react黑色风格ui

Out of the box, React allows you to style components directly with the style property. It’s accepts an object of style properties and for most use cases, it’s more than sufficient. As a single property, there’s no way to specify more granular defaults and support for !important is effectively non-existent with the style property. Luckily, a bit of emotion will go a long way!

开箱即用，React允许您直接使用style属性来设置组件的style 。 它接受样式属性的对象，对于大多数用例来说，这已经足够了。 作为单个属性，无法指定更详细的默认值， style属性实际上不存在对!important支持。 幸运的是，一点点emotion会走很长一段路！

👩‍🎤 emotion is flexible and highly performant CSS-in-JS library. It accepts strings and objects, supports defaulting and extending variable and with an additional Babel plugin even supports inline child selectors!

情感是灵活且高性能CSS-in-JS库。 它接受字符串和对象，支持默认和扩展变量，并带有额外的Babel插件，甚至支持内联子选择器！

入门 (Getting Started)

To kick things off, we will need to install our dependencies, emotion and emotion-react via npm:

首先，我们需要通过npm安装依赖项， emotion和emotion-react ：

$ npm install --save emotion emotion-react

or via yarn:

或通过yarn ：

$ yarn add emotion emotion-react

Be sure to include react-emotion within in your component’s source code:

确保在组件的源代码中包含react-emotion ：

import styled, { css } from "react-emotion";

用法 (Usage)

With our dependencies installed, let’s talk about the different ways that you can leverage emotion to style your components.

安装我们的依赖项后，让我们讨论一下可以利用emotion来设计组件样式的不同方法。

CSS (CSS)

The quickest way to get up and running with emotion is by passing css to an element’s or component’s className property.

快速启动和运行emotion是将css传递到元素或组件的className属性。

css accepts styles as a string, a tagged template literal, an object or an array.

css接受样式作为字符串，带标签的模板文字，对象或数组。

Here are a couple of examples of css with a string and with an object:

这是带有字符串和对象的css的两个示例：

<div className={css`background: #eee;`}>
  <div className={css({ padding: 10 })}>
    Hooray, styles!
  </div>
</div>

风格化 (Styled)

In addition to css you can also use styled to create an element and style it.

除了css外，还可以使用styled创建元素并设置其样式。

Similar to css, styled can be used with a string, a tagged template literal, an object of an array.

与css相似， styled可以与字符串，带标签的模板文字，数组的对象一起使用。

When you use styled to create an element you can then create new elements with properties that can then be utilized in your styles. This opens the door for easy customization and reuse:

当您使用styled创建元素时，可以随后创建具有可以在样式中使用的属性的新元素。 这为轻松定制和重用打开了大门：

const Heading = styled("h1")`
  background-color: ${props => props.bg};
  color: ${props => props.fg};
`;

Which creates a Heading component that accepts bg and fg properties that will set the background and text colors:

这将创建一个Heading组件，该组件接受bg和fg属性，这些属性将设置背景和文本颜色：

<Heading bg="#008f68" fg="#fae042">
  Heading with yellow text and a green background!
</Heading>

Taking things a step further, we can take our Heading component and extend it, bringing the background and foreground color properties along with it:

更进一步，我们可以采用Heading组件并将其扩展，将背景和前景颜色属性与之一同使用：

const Subheading = Heading.withComponent("h2");

The properties themselves are not mandatory, so you include / omit them as you see fit:

属性本身不是强制性的，因此您可以根据需要包括/忽略它们：

<Subheading fg="#6db65b">
  Subheading with default colors!
</Subheading>
<Subheading fg="#6db65b">
  Subheading with light green text!
</Subheading>
<Subheading bg="#6db65b">
  Subheading with light green background!
</Subheading>

Just like css, you can specify your styles as an object instead of as a string:

就像css一样，您可以将样式指定为对象而不是字符串：

const Quote = styled("blockquote")(props => ({
  fontSize: props.size,
}));

And even include an object of default styles:

甚至包括一个默认样式的对象：

const Cite = styled("cite")(
  {
    fontWeight: 100
  },
  props => ({
    fontWeight: props.weight
  })
);

That can be optionally set when using the component:

使用组件时可以选择设置：

<Cite>
  Citation with light text!
</Cite>
<Cite weight={700}>
  Citation with heavy text!
</Cite>

As mentioned before, with emotion you can specify !important styles with ease:

如前所述，您可以通过emotion轻松地指定!important样式：

const Footer = styled("footer")`
  margin-top: 50px !important;
`;

放在一起 (Putting It All Together)

Now that we’ve went through a bunch of disparate use cases, let’s go crazy and put them together into a more cohesive example:

现在，我们已经处理了许多不同的用例，让我们疯狂起来，将它们放到一个更紧密的示例中：

import React from "react";
import { render } from "react-dom";
import styled, { css } from "react-emotion";

const Heading = styled("h1")`
  background-color: ${props => props.bg};
  color: ${props => props.fg};
`;

const Subheading = Heading.withComponent("h2");

const Quote = styled("blockquote")(props => ({
  fontSize: props.size
}));

const Cite = styled("cite")(
  {
    fontWeight: 100
  },
  props => ({
    fontWeight: props.weight
  })
);

const Footer = styled("footer")`
  border-top: 1px solid #ccc;
  color: #ccc;
  margin-top: 50px !important;
  padding-top: 20px;
`;

function App() {
  return (
    <div className={css`background: #ddd;`}>
      <div className={css({ padding: 10 })}>
        <Heading bg="#008f68" fg="#fae042">
          Gator Lyrics
        </Heading>
        <Subheading fg="#6db65b">
          Lyrics from songs that contain the word "alligator"
        </Subheading>
        <Quote size={28}>
          See you later, alligator. After a while, crocodile.
        </Quote>
        <Cite weight={700}>Bill Haley</Cite>
        <Footer>EOF</Footer>
      </div>
    </div>
  );
}

const container = document.createElement("div");
document.body.appendChild(container);
render(<App />, container);

That’s how you can style with emotion in your React app!

这就是您如何在自己的React应用中以emotion风格的方式！

To see a live example of the code above, you can check out this CodeSandbox.

要查看上面代码的实时示例，您可以查看此CodeSandbox 。

Enjoy!

请享用！

翻译自: https://www.digitalocean.com/community/tutorials/react-react-emotion

react黑色风格ui