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

最新推荐文章于 2024-03-23 10:02:11 发布

小李科技

最新推荐文章于 2024-03-23 10:02:11 发布

阅读量250

点赞数

分类专栏： React React入门30天

React 同时被 2 个专栏收录

68 篇文章 1 订阅

订阅专栏

React入门30天

30 篇文章 4 订阅

订阅专栏

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

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

下载免费的PDF

30天的React Mini-Ebook

样式

在Github上编辑此页面

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

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

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

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

CasCasding样式表（CSS）
内联样式
样式库

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

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