【全栈React】第9天: 样式

本文转载自：众成翻译
译者：iOSDevLog
连接：http://www.zcfy.cc/article/3820
原文：https://www.fullstackreact.com/30-days-of-react/day-9/

没有样式的应用是不完整。咱们将看看咱们可使用不一样的方法来调整组件，从传统的CSS到内联样式。

经过这一点，除了将CSS类名附加到组件以外，咱们尚未触及咱们组件的样式。 今天，咱们将花点时间去了解咱们的React组件的样式，使它们看起来很棒，但仍然保持完整。

咱们来看几种不一样的方式来组合一个组件。

1. 级联样式表(CSS)
2. 内联样式
3. 样式库

级联样式表(CSS)

使用CSS来构造咱们的Web应用程序是咱们已经熟悉的一个实践，并非什么新鲜事。 若是你之前曾经写过Web应用程序，那么你最有可能使用/编写了CSS。 简而言之，CSS是咱们为实际标记以外的DOM组件添加样式的一种方式。

使用CSS与React不同。 咱们将在React中使用CSS，就像咱们在_not_使用React时使用CSS同样。 咱们将为组件赋值ids / classes，并使用CSS选择器来定位页面上的元素，让浏览器处理样式。

例如，咱们来设计一下咱们一直在使用的Header 组件。

假设咱们想使用CSS将标题颜色变成橙色。 咱们能够经过在咱们的页面中添加一个样式表，并在CSS类中定位.header 的CSS类来轻松处理。

回想一下，咱们的 Header 组件的render函数目前看起来像这样：

class Header extends React.Component {
  render() {
    // Classes to add to the <input /> element
    let searchInputClasses = ["searchInput"];

    // Update the class array if the state is visible
    if (this.state.searchVisible) {
      searchInputClasses.push("active");
    }

    return (
      <div className="header">
        <div className="fa fa-more"></div>

        <span className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className={searchInputClasses.join(' ')}
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

咱们能够经过在普通的css文件中定义一个.header类的样式来定位header 。 按照惯例，咱们须要确保咱们在HTML页面中使用<link />tag来包含CSS类。 假设咱们将样式定义在与index.html文件相同的目录中的styles.css文件中，该<link />标签将以下所示：

<link rel="stylesheet" type="text/css" href="styles.css">

让咱们填写Header 类名称的样式：

.header {
  background: rgba(251, 202, 43, 1);
}
.header, .fa, .title, .searchIcon {
  color: #333333;
}

首先关于CSS的最多见的抱怨之一是级联功能自己。 CSS的工做方式是将_cascades_（所以命名）父样式做为子样式的样式。这一般是错误的缘由，由于类一般具备通用名称，而且易于覆盖非特定类的类样式。

咱们使用的例子中.header的类名不是很特别。页面自己不只能够有一个标题，并且页面上的内容框多是文章，甚至咱们放置在页面上的广告均可能有一个.header类名称。

咱们能够避免这个问题的一个方法是使用像css modules这样的东西，为咱们定义自定义的很是独特的CSS类名。
除了CSS模块以外，CSS模块尚未什么神奇之处，它强制咱们的构建工具为咱们定义了自定义的CSS类名，因此咱们可使用不太独特的名称。
咱们稍后将在工做流程中研究使用CSS模块。

React提供了一种不太新的方法，经过容许咱们与JSX一块儿定义样式，从而彻底避免了这个问题。

内联样式

向实际组件添加样式不只容许咱们定义组件中的样式，还能够根据应用的不一样状态动态定义样式。

React为咱们提供了一种使用JavaScript对象而不是单独的CSS文件来定义样式的方法。 让咱们再次使用Header 组件，而不是使用css类来定义样式，让咱们将它移动到内联样式。

使用style 属性能够轻松地定义组件中的样式。 React内的全部DOM元素都接受一个style属性，该属性预计是一个具备骆驼命名的对象，定义了一个样式名称和值映射到它们的值。

例如，要在JSX中的元素中添加一个color样式，这多是：

const style = { color: 'blue' }
<div style={style}>
  This text will have the color blue
</div>

请注意，咱们使用两个大括号定义了样式。 当咱们在模板标签中传递一个JavaScript对象时，括号里是JS对象，括号外部是模板标签。

另外一个可能使这个更清楚的例子是传递在JSX以外定义的JavaScript对象，即

render() {
  const divStyle = { color: 'blue' }
  return (<div style={divStyle}>
    This text will have the color blue
  </div>);
}

在任何状况下，因为这些是JS定义的样式，因此咱们不能使用任何传统的css样式名称（由于background-color 在JavaScript中将无效）。 反之，咱们的样式名称须要使用驼峰命名方式。

驼峰式大小写 除了第一个词首字母小写，其它词首字母都大写，如backgroundColor 和linearGradient。

要更新咱们的头部组件以使用这些样式，而不是依赖于CSS类定义，咱们能够在style 属性以后添加className 属性：

class Header extends React.Component {
  // ...
  render() {
    // Classes to add to the <input /> element
    let searchInputClasses = ["searchInput"];

    // Update the class array if the state is visible
    if (this.state.searchVisible) {
      searchInputClasses.push("active");
    }

    const wrapperStyle = {
      backgroundColor: 'rgba(251, 202, 43, 1)'
    }

    const titleStyle = {
      color: '#111111'
    }

    const menuColor = {
      backgroundColor: '#111111'
    }

    return (
      <div style={wrapperStyle} className="header">
        <div className="menuIcon">
          <div className="dashTop" style={menuColor}></div>
          <div className="dashBottom" style={menuColor}></div>
          <div className="circle" style={menuColor}></div>
        </div>

        <span style={titleStyle} className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className={searchInputClasses.join(' ')}
          placeholder="Search ..." />

        {/* Adding an onClick handler to call the showSearch button */}
        <div
          style={titleStyle}
          onClick={this.showSearch.bind(this)}
          className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

咱们的标题将再次变成橙色。

样式库

React社区是一个充满活力的地方（这是一个理想的库工做的缘由之一）。有不少样式库能够用来帮助咱们创建咱们的风格，如Radium这样强大的实验室。

大多数这些库都是基于React开发人员经过使用React定义的工做流。

Radium容许咱们定义在React组件自己以外的公共样式，它自动提供前缀，支持媒体查询（如:hover和:active），简化了内联样式，而且还有更多种类。

咱们不会在这篇文章中介绍Radium，由于它不在本系列的范围以内，可是知道其余的库是很好的，特别是若是你想扩展内联样式的定义。

如今咱们知道如何组合咱们的组件，咱们没有遇到太多的麻烦能够作一些好看的。在下一部分中，咱们将立刻回到为组件添加用户交互性。