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