React教程: 第9天 样式

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

原著PDF版本下载:下载超过300页的 PDF

没有样式的应用是不完整。我们将看看我们可以使用不同的方法来调整组件,从传统的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() {
    return (
      <div className="header">
        <div className="menuIcon">
          <div className="dashTop"></div>
          <div className="dashBottom"></div>
          <div className="circle"></div>
        </div>

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

        <input
          type="text"
          className="searchInput"
          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 类名称的样式:

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

.demo .notificationsFrame .header .menuIcon .dashTop,
.demo .notificationsFrame .header .menuIcon .dashBottom,
.demo .notificationsFrame .header .menuIcon .circle {
  background-color: #333333;
}

在这里插入图片描述
首先关于CSS的最常见的抱怨之一是级联功能本身。 CSS的工作方式是将cascades(因此命名)父样式作为子样式的样式。这通常是错误的原因,因为类通常具有通用名称,并且易于覆盖非特定类的类样式。

我们使用的例子中.header的类名不是很特别。页面本身不仅可以有一个标题,而且页面上的内容框可能是文章,甚至我们放置在页面上的广告都可能有一个.header类名称。

我们可以避免这个问题的一个方法是使用像css modules这样的东西,为我们定义自定义的非常独特的CSS类名。 除了CSS模块之外,CSS模块还没有什么神奇之处,它强制我们的构建工具为我们定义了自定义的CSS类名,所以我们可以使用不太独特的名称。 我们稍后将在工作流程中研究使用CSS模块。

React提供了一种不太新的方法,通过允许我们与JSX一起定义样式,从而完全避免了这个问题。

Inline styles(内联样式)


向实际组件添加样式不仅允许我们定义组件中的样式,还允许我们根据应用程序的不同状态动态定义样式。

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

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

例如,要在JSX中的元素中添加一个color样式,这可能是:

<div style={{ color: 'blue' }}>
  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中将无效)。 反之,我们的样式名称需要使用驼峰命名方式。

驼峰式大小写 除了第一个词首字母小写,其它词首字母都大写,如backgroundColorlinearGradient

要更新我们的头部组件以使用这些样式,而不是依赖于CSS类定义,我们可以在style属性之后添加className 属性:

class Header extends React.Component {
  render() {
    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="searchInput"
          placeholder="Search ..."
        />

        <div style={titleStyle} className="fa fa-search searchIcon"></div>
      </div>
    );
  }
}

我们的标题将再次变成橙色。
在这里插入图片描述

Styling libraries(样式库)


React社区是一个充满活力的地方(这是一个理想的库工作的原因之一)。有很多样式库可以用来帮助我们建立我们的风格,如Radium这样强大的实验室。

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

Radium允许我们定义在React组件本身之外的公共样式,它自动提供前缀,支持媒体查询(如:hover:active),简化了内联样式,并且还有更多种类。

我们不会在这篇文章中介绍Radium,因为它不在本系列的范围之内,但是知道其他的库是很好的,特别是如果你想扩展内联样式的定义。

现在我们知道如何组合我们的组件,我们没有遇到太多的麻烦可以做一些好看的。在下一部分中,我们将马上回到为组件添加用户交互性。


上一章:属性类型
下一章:交互性


本教程系列的完整源代码可以在 GitHub repo, 上找到,其中包含所有样式和代码示例。
如果在任何时候你感到困扰,有进一步的问题,请随时通过以下方式与我们联系:
在原文文章末尾评论这篇文章
发送电子邮件至 [email protected]
加入我们的 gitter room
发推文给我们 @fullstackreact
REACT.JS DOM 应用 移动 JAVASCRIPT
版权声明 本译文仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处、译者和众成翻译的完整链接。
原文链接:全栈React: React 30天


如果有疑问可以直接留言评论,如果觉得对你有帮助,可以小小的赞赏一杯奶茶钱,谢谢!!

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值