React开发经常使用设计模式-组件样式

React 是视图层。所以，它能够控制在浏览器中渲染的标记。众所周知，页面上的 HTML 标记与 CSS 的样式是紧密联系在一块儿的。有几种方式来处理 React 应用的样式，接下来介绍这些最流行的方式。

组件样式

经典 CSS 类

JSX 语法至关接近于 HTML 语法。所以，拥有与 HTML 几乎相同的标签属性，仍然可使用 CSS 类来处理样式。类是定义在外部的 .css文件中的。惟一须要注意的是 React 中使用的是 className，而不是 class 。例如:

1 <h1> className='title'>Styling</h1>

内联样式

内联样式也能很好的工做。相似于 HTML ，能够经过 style 属性来直接传入样式。可是，style 属性在 HTML 中是字符串，而在 JSX 中必须得是一个对象。

1 const inlineStyles = {
2   color: 'red',
3   fontSize: '10px',
4   marginTop: '2em',
5   'border-top': 'solid 1px #000'
6 };
7 
8 <h2 style={ inlineStyles }>Inline styling</h2>

由于用 JavaScript 编写样式，因此从语法角度来看，是有一些限制的。若是想要使用原始的 CSS 属性名称，那么须要用引号包裹起来，不然须要遵循驼峰式命名规则。可是，使用 JavaScript 编写样式却很是有趣，它比普通的 CSS 更具灵活性。例如样式的继承:

1 const theme = {
2   fontFamily: 'Georgia',
3   color: 'blue'
4 };
5 const paragraphText = {
6   ...theme,
7   fontSize: '20px'
8 };

theme中有一些基础样式，而后在 paragraphText 中混入 theme 的样式。简而言之，可以使用 JavaScript 的所有能力来组织 CSS 。重要的是最终生成了一个传给 style 属性的对象。

CSS 模块

CSS 模块 是创建在到目前为止所介绍过的内容之上的。若是你不喜欢 JavaScript 用法来写 CSS ，那么可使用 CSS 模块，它可让继续编写普通的 CSS 。一般，这个库是在打包阶段发挥做用的。能够将它做为编译步骤的一部分进行链接，但一般做为构建系统插件分发。

下面的示例可让你快速对其运行原理有个大体的了解:

 1 /* style.css */
 2 .title {
 3   color: green;
 4 }
 5 
 6 // App.jsx
 7 import styles from "./style.css";
 8 
 9 function App() {
10   return <h1 style={ styles.title }>Hello world</h1>;
11 }

默认状况下是没法这样使用的，只有使用了 CSS 模块，才能直接导入普通的 CSS 文件并使用其中的类。

当提到 普通的 CSS ，并不是真的指最原始的 CSS 。它支持一些很是有用的组合技巧。例如:

1 .title {
2   composes: mainColor from "./brand-colors.css";
3 }

Styled-components

Styled-components 则是另外一种彻底不一样的方向。此库再也不为 React 组件提供内联样式。须要使用组件来表示它的外观感觉。例如，建立了 Link组件，它具备特定的风格和用法，而再使用 <a>标签。

1 const Link = styled.a`
2   text-decoration: none;
3   padding: 4px;
4   border: solid 1px #999;
5   color: black;
6 `;
7 
8 <Link href='http://google.com'>Google</Link>

还有一种扩展类的机制。还可使用 Link 组件，可是会改变它的文字颜色，像这样:

1 const AnotherLink = styled(Link)`
2   color: blue;
3 `;
4 
5 <AnotherLink href='http://facebook.com'>Facebook</AnotherLink>

到目前为止 styled-components 多是多种处理 React 样式的方法中我最感兴趣的。用它来建立组件很是简单，并能够忘记样式自己的存在。若是你的公司有能力建立一个设计系统并用它构建产品的话，那么这个选项多是最合适的。

结语

处理 React 应用的样式有多种方式。在生产环境中试验过全部方式，能够说无所谓对与错。正如 JavaScript 中大多数技术同样，你须要挑选一个更适合你的方式。