【全栈React】第9天: 样式

zilu 发布于2019-08-20 18:33 / 3173人阅读

摘要：我们将为组件赋值，并使用选择器来定位页面上的元素，让浏览器处理样式。的工作方式是将因此命名父样式作为子样式的样式。这通常是错误的原因，因为类通常具有通用名称，并且易于覆盖非特定类的类样式。反之，我们的样式名称需要使用驼峰命名方式。

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

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

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

我们来看几种不同的方式来组合一个组件。

级联样式表(CSS)

内联样式

样式库

级联样式表(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  element
    let searchInputClasses = ["searchInput"];

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

    return (
      
        

        
          {this.props.title}
        

        

        
      
    )
  }
}

我们可以通过在普通的css文件中定义一个.header类的样式来定位header 。按照惯例，我们需要确保我们在HTML页面中使用tag来包含CSS类。假设我们将样式定义在与index.html文件相同的目录中的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" }

  This text will have the color blue

请注意，我们使用两个大括号定义了样式。 当我们在模板标签中传递一个JavaScript对象时，括号里是JS对象，括号外部是模板标签。
另一个可能使这个更清楚的例子是传递在JSX之外定义的JavaScript对象，即
render() {
  const divStyle = { color: "blue" }
  return (
    This text will have the color blue
  );
}

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

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

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

class Header extends React.Component {
  // ...
  render() {
    // Classes to add to the  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 (
      
        
          
          
          
        

        
          {this.props.title}
        

        

        {/* Adding an onClick handler to call the showSearch button */}
        
      
    )
  }
}

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

样式库

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

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

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

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

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

专线服务混合云明解c语言第9章 javascript基础教程第9版 java 9天快速第7天:CSS入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84670.html

【全栈React】React 30天教程索引

摘要：今天我们将讨论创建组件的最终方案，即无状态函数的纯组件。今天我们正在研究一种处理提出的复杂数据的方法，称为体系结构。第天部署介绍今天，我们将探讨部署我们的应用所涉及的不同部分，以便外界可以使用我们的应用。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

appetizerio 2019-08-20 18:33 评论0 收藏0
【全栈React】第6天: 状态

摘要：无论何时状态改变通过，组件将重新投递。在调用函数之后，我们可以将第二个参数传递给函数，该函数将在状态更新后保证被调用。今天，我们更新了我们的组件以使其处于状态状态，现在有必要处理如何使组件成为状态。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3824原文：https://www.fullstackreact.com/30-d...

leo108 2019-08-20 18:29 评论0 收藏0
【全栈React】第30天: 总结和更多的资源

摘要：本文转载自众成翻译译者链接原文我们做到了第天。欢迎来到最后一天恭喜你做到了我们此行的最后一个部分是通过参与。反应社区是活跃成长和友好的。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3800原文：https://www.fullstackreact.com/30-days-of-react/day-30/ 我们做到了！第30天...

Miracle_lihb 2019-08-21 11:52 评论0 收藏0
【全栈React】第12天: 创建React应用

摘要：本文转载自众成翻译译者链接原文今天，我们将添加一个构建过程来存储常见的构建操作，以便我们可以轻松地开发和部署我们的应用。在要创建应用的目录中打开终端窗口。文件有一个的节点，这个应用本身将被自动挂载这是在文件中处理的。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3822原文：https://www.fullstackreact...

solocoder 2019-08-20 18:33 评论0 收藏0
【全栈React】第28天: 部署

摘要：本文转载自众成翻译译者链接原文今天，我们将看看一些即将推出的选项，以便我们的网站启动并运行。昨天我们离开了准备第一次部署我们的应用程序。现在的问题是我们要在哪里和如何部署让我们来探索什么这与部署非页应用程序类似。本文转载自：众成翻译译者：iOSDevLog链接：http://www.zcfy.cc/article/3802原文：https://www.fullstackreact.c...

liuhh 2019-08-21 11:52 评论0 收藏0