30天入坑React ---------------day09 Style

  • Z时代
  • 2024-01-10
  • 分类：综合

react

这篇文章是30天React系列的一部分 。

在本系列中，我们将从非常基础开始，逐步了解您需要了解的所有内容，以便开始使用React。如果您曾经想学习React，那么这里就是您的最佳选择！

下载免费的PDF

样式

在Github上编辑此页面

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

通过这一点，除了将Cascading StyleSheet（CSS）类名称附加到组件之外，我们还没有触及组件的样式。

今天，我们将花时间通过几种方式来设计我们的React组件的样式，使它们看起来很棒，但仍然保持我们的理智。我们甚至可以通过使用CSS更容易一些工作！

让我们看一下我们可以为组件设置样式的几种方法。

  1. CasCasding样式表（CSS）

  2. 内联样式

  3. 样式库

CSS

使用CSS来设置我们的Web应用程序的样式是我们已经熟悉的一种做法，并不是什么新鲜事。如果您之前曾经编写过Web应用程序，那么您很可能已经使用/编写过CSS。简而言之，CSS是我们在实际标记本身之外向DOM组件添加样式的一种方式。

使用CSS和React并不新颖。我们将在React中使用CSS，就像我们在不使用React 时使用CSS一样。我们将ids / classes分配给组件，并使用CSS选择器来定位页面上的这些元素，让浏览器处理样式。

作为一个例子，让我们设计Header我们已经使用过的组件。

橙色标题

假设我们想使用CSS将标题颜色变为橙色。我们可以通过在页面中添加样式表并在CSS类中定位CSS类来轻松处理此问题.header。

回想一下，我们Header组件的渲染功能目前如下所示：

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>
    )
  }
}

我们可以header通过.header在常规css文件中定义类的样式来定位。像往常一样，我们需要确保使用<link />标记在我们的HTML页面中包含CSS类。假设我们在与文件styles.css位于同一目录中的index.html文件中定义样式，此<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的工作方式是它将父级样式级联（因此名称）为其子级。这通常是导致错误的原因，因为类通常具有通用名称，并且很容易覆盖非特定类的类样式。

使用我们的示例，类名.header不是非常具体。页面本身不仅具有标题，而且页面上的内容框可能，文章，甚至我们放置在页面上的广告都可能具有类名.header。

我们可以避免这个问题的一种方法是使用类似css模块的东西来为我们定义自定义的，非常独特的CSS类名。除了强制我们的构建工具为我们定义自定义CSS类名之外，CSS模块没有任何神奇之处，因此我们可以使用不太独特的名称。我们将在稍后的工作流程中考虑使用CSS模块。

React提供了一种不那么新的方法来完全避免这个问题，允许我们在JSX中内联定义样式。

内联样式

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

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

使用styleprop 可以轻松定义组件内的样式。React中的所有DOM元素都接受一个style属性，该属性应该是一个具有camel-cased键的对象，用于定义样式名称和映射到其值的值。

例如，要在JSX中color向<div />元素添加样式，可能如下所示：

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定义的样式，因此我们不能使用任何ole'css样式名称（因为background-color在JavaScript中无效）。相反，React要求我们使用样式名称。

camelCase正在使用大写字母为每个带有大写字母的单词写复合词，除了第一个单词，比如backgroundColor和linearGradient。

要更新我们的标头组件以使用这些样式而不是依赖于CSS类定义，我们可以添加classNameprop和styleprop：

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社区是一个非常有活力的地方（这是一个很棒的图书馆工作的原因之一）。我们可以使用很多样式库来帮助我们构建样式，例如Formiumable实验室的Radium。

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

Radium允许我们在React组件本身之外定义通用样式，它自动供应商前缀，支持媒体查询（如:hover和:active），简化内联样式，以及更多类型。

我们不会在这篇文章中深入研究Radium，因为它超出了本系列的范围，但是了解其他库是很好的，特别是如果你想扩展内联样式的定义。

既然我们知道如何设计我们的组件，我们可以制作一些好看的组件而不会有太多麻烦。在下一节中，我们将直接向组件添加用户交互性。

学习REACT正确的方法

React和朋友的最新，深入，完整的指南。

下载第一章

❮上一个

下一章：

互动

下一个 ❯

本教程系列的完整源代码可以在GitHub repo上找到，其中包括所有样式和代码示例。

如果您在任何时候感到困难，还有其他问题，请随时通过以下方式与我们联系：

  • 在文章末尾评论这篇文章

  • 通过[email protected]发送电子邮件给我们

  • 加入我们的gitter室

  • 发送电子邮件至@fullstackreact

  •  

以上是 30天入坑React ---------------day09 Style 的全部内容， 来源链接： utcz.com/z/383017.html

回到顶部