如何设置内联样式

介绍

大多数静态网站都是使用 HTML、CSS 和 JavaScript 构建的。HTML 用作标记语言，CSS 负责设置样式，JavaScript 负责处理交互性。但随着 React 等库的出现，一切似乎都由 JavaScript 管理。这种范式转变导致了一种新的样式思维方式。

在 React 中，您可以通过多种方式设置样式，包括使用类、ID 或内联样式。在本指南中，您将学习如何使用内联样式方法为组件设置样式。

内联样式概述

传统上，您会将内联样式作为字符串添加到 HTML 元素的 style 属性中。style 属性可以包含任何 CSS 属性。

例如：

      <h1 style="color:green;text-align:center;">Inline Style</h1>

内联样式可用于将特定样式应用于单个元素。如果您发现自己将相同的内联样式添加到多个元素，则应考虑改用类添加样式。

在 React 中，内联样式不是以字符串形式指定的。它们被定义为一个对象，该对象以驼峰式 CSS 属性作为其键，其值通常是一个表示样式值的字符串。如果你想将样式作为 prop 传递，或者想要一些条件样式，你会发现自己需要内联样式。

在 React 组件中设置内联样式

在上一节的示例中，您可以为标题创建一个单独的组件。要指定样式，请使用<H1>组件上的style属性。

在构造函数中指定样式对象，如下所示。

      this.styles = {
  color: "green",
  textAlign: "center",
};
    

请注意，此处的text-align CSS 属性已采用驼峰式命名法转换为textAlign。

将此样式对象传递给<H1 />组件，如下所示。

      import React from "react";

class Heading extends React.Component {
  constructor(props) {
    super(props);

    this.styles = {
      color: "green",
      textAlign: "center",
    };
  }

  render() {
    return <H1 style={this.styles}>{this.props.text}</H1>;
  }
}
    

使用扩展运算符组合多个样式对象。

      import React from "react";

class Heading extends React.Component {
  constructor(props) {
    super(props);

    this.styles = {
      color: "green",
      textAlign: "center",
    };

    this.fontStyles = {
      fontSize: "32px",
      fontWeight: "bold",
    };
  }

  render() {
    return (
      <H1 style={{ ...this.styles, ...this.fontStyles }}>{this.props.text}</H1>
    );
  }
}
    

您还可以使用Object.assign()方法来组合多种样式。

      import React from "react";

class Heading extends React.Component {
  constructor(props) {
    super(props);

    this.styles = {
      color: "green",
      textAlign: "center",
    };

    this.fontStyles = {
      fontSize: "32px",
      fontWeight: "bold",
    };
  }

  render() {
    return (
      <H1 style={Object.assign({}, this.styles, this.fontStyles)}>
        {this.props.text}
      </H1>
    );
  }
}
    

条件样式

假设您必须根据 prop 减小标题的大小。使用三元运算符（?、:）或逻辑运算符（&&或||）根据状态或 props 有条件地添加或删除样式对象。

      import React from "react";

class Heading extends React.Component {
  constructor(props) {
    super(props);

    this.styles = {
      color: "green",
      textAlign: "center",
    };

    this.fontStyles = {
      fontSize: "32px",
      fontWeight: "bold",
    };
  }

  render() {
    return (
      <H1
        style={Object.assign(
          {},
          this.styles,
          this.fontStyles,
          this.props.small && { fontSize: "20px" }
        )}
      >
        {this.props.text}
      </H1>
    );
  }
}
    

在默认样式的末尾添加条件样式，这样条件样式就不会被默认样式覆盖。此外，为了便于阅读，最好将任何样式对象存储在单独的变量或属性中。

      import React from "react";

class Heading extends React.Component {
  constructor(props) {
    super(props);

    this.styles = {
      color: "green",
      textAlign: "center",
    };

    this.fontStyles = {
      fontSize: "32px",
      fontWeight: "bold",
    };

    this.smallFontSize = this.props.small && { fontSize: "20px" };
  }

  render() {
    return (
      <H1
        style={Object.assign(
          {},
          this.styles,
          this.fontStyles,
          this.smallFontSize
        )}
      >
        {this.props.text}
      </H1>
    );
  }
}
    

结论

本指南可以作为您进入样式领域的起点。为了进一步学习，请尝试使用类或第三方框架（如 Bulma 或 Bootstrap）的不同样式策略。通常认为将 UI 组件与应用程序的核心或业务逻辑分开是一种最佳实践。您还可以使用 CSS 模块、样式组件等高级模式来设置应用程序的样式。您必须进行一些实验，以根据您的用例找出最适合您或您的团队的方法。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文