react 组件样式

by Gilad Dayagi

通过吉拉德·达亚吉

如何使用样式化组件为React组件创建视觉变体 (How to create visual variants for React components using styled-components)

Styled-components is a library for styling React components that took the React world by storm when it was introduced at the end of 2016. The library is powerful and flexible. And solves most of the problems that classic CSS has in the so-called Component Age.

Styled-components是用于对React组件进行样式设置的库，该库在2016年底推出时风靡了React世界。该库功能强大且灵活。 并解决了经典CSS在所谓的“组件时代”中存在的大多数问题 。

In this post, I’ll look into one aspect of styling components:

在这篇文章中，我将研究样式组件的一个方面：

How to implement a component that can have multiple visual variants.

如何实现可以具有多个视觉变量的组件。

And I’ll show you three different ways to achieve this using styled-components, which I call:

我将向您展示三种使用样式化组件来实现此目的的方法，我称之为：

1: The Classic Approach

1：经典方法

2: The Component Approach

2：分量法

3: The Extending Approach

3：扩展方法

I’ll assume some knowledge of React and styled-components. But in case you need a reference, both have excellent documentation. You can find React’s docs here and styled-component’s here.

我将假设一些有关React和样式化组件的知识。 但是，如果您需要参考，两者都有出色的文档。 你可以找到阵营的文档在这里和风格的分量的位置 。

You can see a live demo of each approach here.

您可以在此处观看每种方法的现场演示。

视觉变体 (Visual variants)

In React, a component translates state and props into a visual representation. This usually means into a DOM element.

在React中，组件将状态和道具转换为视觉表示。 这通常意味着进入DOM元素。

And sometimes you need a component to switch between several visual states, depending on certain conditions. Meaning you need the component to change, perhaps, color to convey different information. For example:

有时，您需要一个组件来根据特定条件在几种视觉状态之间切换。 这意味着您需要更改组件(也许是颜色)以传达不同的信息。 例如：

• A button can be normal, primary, secondary, disabled, etc.按钮可以是普通，主要，辅助，禁用等。
• A list item can be selected or not selected.可以选择列表项，也可以不选择。
• A form element can be required, with error or normal.可能需要表单元素，错误或正常。

A good example of this visual variant pattern is Bootstrap’s button styles. You style the button independent of its content and choose among a host of variants. And each variant of the button serves its own semantic purpose (like success or disabled) as opposed to appearance (like blue, round, etc.).

Bootstrap的按钮样式就是一个很好的例子。 您可以对按钮进行样式设置，使其与按钮的内容无关，然后在众多变体中进行选择。 与外观(例如蓝色，圆形等)相反，按钮的每个变体都具有自己的语义目的(例如成功或禁用)。

So how do you implement visual variants with styled-components? You can do so using the Classic Approach, Component Approach, or Extending Approach.

那么如何使用样式化组件实现视觉变体？ 您可以使用经典方法，组件方法或扩展方法进行操作。

1：经典方法 (1: The Classic Approach)

Styled-components fully supports CSS. Which includes the ability to apply style rules to “subclasses” of elements. That means you can create visual variants using CSS classes not so different from how it’s done with plain CSS.

样式化组件完全支持CSS。 其中包括将样式规则应用于元素的“子类”的功能。 这意味着您可以使用CSS类创建视觉变体，与普通CSS的变体没有什么不同。

To select a variant of a component you modify the className prop. You can also pass a number of classes this way and combine several variants, say, ‘primary’ and ‘large’.

要选择组件的变体，请修改className属性。 您还可以通过这种方式传递许多类，并组合多个变体，例如“主要”和“大型”。

Example

例

// ButtonClassic.jsximport styled from 'styled-components'

const ButtonClassic = styled.button`  background: #fff;  color: #333;  font-size: 1em;  margin: 1em;  padding: 6px 12px;  border: 1px solid #ccc;  border-radius: 4px;  cursor: pointer;

/* Style sub-classes */  &.primary {    color: #fff;    background: #337ab7;    border-color: #2e6da4;  }  &.success {    color: #fff;    background-color: #5cb85c;    border-color: #4cae4c;  }  &.link {    color: #337ab7;    background-color: transparent;    border: none;    border-radius: 0;    font-weight: 400;  }  &.large {    font-size: 1.2em;    padding: 10px 16px;    border-radius: 6px;  }  &.disabled {    color: #ddd;    background-color: #aaa;    border: 1px solid #aaa;  }`;

export default ButtonClassic

Usage

用法

// ... &lt;ButtonClassic>Default</ButtonClassic>&lt;ButtonClassic className="primary">Primary</ButtonClassic><ButtonClassic className="success">Success&lt;/ButtonClassic>&lt;ButtonClassic className="link">Link</ButtonClassic>

// With Combos&lt;ButtonClassic className="primary large">  Primary Large</ButtonClassic>

&lt;ButtonClassic className="disabled primary large">  Primary Large Disabled</ButtonClassic>

Pros

优点

• Easy to support several variants.易于支持多种变体。
• Easy to combine a list of variants (for example, primary + large + disabled)易于组合变体列表(例如，主+大+禁用)
• Code is readable and compact代码清晰易读
• Easy to port styles from plain CSS易于从普通CSS移植样式

Cons

缺点

• Doesn’t use standard component facilities (props)不使用标准组件设施(道具)
• When combining classes, results depend on the declaration order of the style rule. Like in classic CSS. This may lead to unexpected behavior.组合类时，结果取决于样式规则的声明顺序。 就像经典CSS一样。 这可能会导致意外的行为。

2：分量法 (2: The Component Approach)

Styled components, like their name suggest are simply normal components. Which means they can receive props. Props that can be accessed in the style declaration and used to determine values for style rules.

样式化的组件(如其名称所暗示的)只是普通组件。 这意味着他们可以接收道具。 可以在样式声明中访问的道具，用于确定样式规则的值。

I call this the Component Approach because it works like how usual React components work. Where prop values are used to calculate the visual representation of the component. In this case, the concept is limited to styling, rather than content.

我将其称为“组件方法”，因为它的工作方式与通常的React组件的工作方式相同。 其中prop值用于计算组件的视觉表示。 在这种情况下，该概念仅限于样式而不是内容。

Example

例

// ButtonComponent.jsx import styled from 'styled-components'

const ButtonComponent = styled.button`  background: ${props => props.primary ? '#337ab7' : '#fff'};  color: ${props => props.primary ? '#fff' : '#333'};  font-size: 1em;  margin: 1em;  padding: 6px 12px;  border: ${props => props.primary ? '1px solid #2e6da4' : '1px solid #ccc'};  border-radius: 4px;  cursor: pointer;`

export default ButtonComponent

Usage

用法

// ...&lt;ButtonComponent>Default</ButtonComponent><ButtonComponent primary={true}>Primary</ButtonComponent>

Pros

优点

• Standard React component behavior, deriving visual representation from props标准React组件行为，从props派生视觉表示

Cons

缺点

• If more than two states are needed, the code can become unreadable如果需要两个以上的状态，则代码可能变得不可读
• There is some code repetition, especially if many rules differ between variants.有一些代码重复，尤其是在变体之间有很多规则不同的情况下。

3：扩展方法 (3: The Extending Approach)

Besides primitive elements, styled-components allows us to also style custom components. So you can re-style a base or default component. And override relevant style rules to create a visual variant.

除了基本元素之外，样式化组件还允许我们对自定义组件进行样式化。 因此，您可以重新设置基本或默认组件的样式。 并覆盖相关的样式规则以创建视觉变体。

Example

例

// ButtonExtend.jsximport styled from 'styled-components'

const ButtonExtend = styled.button`  background: #fff;  color: #333;  font-size: 1em;  margin: 1em;  padding: 6px 12px;  border: 1px solid #ccc;  border-radius: 4px;  cursor: pointer;`

export default ButtonExtend

export const ButtonExtendPrimary = styled(ButtonExtend)`  color: #fff;  background: #337ab7;  border-color: #2e6da4;`

export const ButtonExtendSuccess = styled(ButtonExtend)`  color: #fff;  background-color: #5cb85c;  border-color: #4cae4c;`

export const ButtonExtendLink = styled(ButtonExtend)`  color: #337ab7;  background-color: transparent;  border: none;  border-radius: 0;  font-weight: 400;`

Usage

用法

// ...&lt;ButtonExtend>Default</ButtonExtend><ButtonExtendPrimary>Primary<;/ButtonExtendPrimary&gt;<ButtonExtendSuccess&gt;Success</ButtonExtendSuccess><ButtonExtendLink>Link</ButtonExtendLink>

Pros

优点

• Each variant is a separate component每个变体都是单独的组件
• Easy to have many variants容易有多种变体
• Code is very readable代码可读性强

Cons

缺点

• To get a different variant, a different component needs to be rendered vs changing a property on the same component which might be more cumbersome.为了获得不同的变体，与渲染同一组件上的属性相比，需要渲染一个不同的组件，这可能会比较麻烦。
• Can’t easily support combining multiple variants.无法轻松地支持多个变体的组合。

摘要 (Summary)

I have listed all the ways for doing visual variants that I had a chance to try, but there might be others. Which approach is best depends on your specific needs and preferences.

我已经列出了我有机会尝试过的所有视觉变化方法，但是可能还有其他方法。 哪种方法最好取决于您的特定需求和偏好。

If you missed the link above, a live demo of the code examples is available in this webpack bin.

如果您错过了上面的链接，可以在此webpack bin中获得代码示例的实时演示。

If you know of other approaches using styled-components, let me know in the comments below.

如果您知道使用样式化组件的其他方法，请在下面的评论中告诉我。

Update (Jun 9 2017)

更新(2017年6月9日)

Styled-components V2 was released a few days ago with a slightly better way to use the Extending Approach.

样式组件V2是几天前发布的 ，使用扩展方法的一种更好的方法。

There is now a specific function for this approach named extend. The function is like the original method, but under the hood creates a new stylesheet by extending the old one. And thus doesn’t generate two classes.

现在，此方法有一个特定功能，称为extend 。 该函数类似于原始方法，但是在内部通过扩展旧样式表来创建新样式表。 因此不会生成两个类。

So the original example for the Extending Approach, would look something like this:

因此，扩展方法的原始示例如下所示：

// ButtonExtendV2.jsximport styled from 'styled-components'

const ButtonExtendV2 = styled.button`  background: #fff;  color: #333;  font-size: 1em;  margin: 1em;  padding: 6px 12px;  border: 1px solid #ccc;  border-radius: 4px;  cursor: pointer;`

export default ButtonExtendV2

export const ButtonExtendV2Primary = ButtonExtendV2.extend`  color: #fff;  background: #337ab7;  border-color: #2e6da4;`

export const ButtonExtendV2Success = ButtonExtendV2.extend`  color: #fff;  background-color: #5cb85c;  border-color: #4cae4c;`// ...

翻译自: https://www.freecodecamp.org/news/visual-variants-for-react-components-with-styled-components-dfaff6a76273/

react 组件样式