eact 是一个流行的用于构建用户界面的 JavaScript 库。随着越来越多的 JavaScript 框架跳转到 React，内联样式语法也变得流行起来。内联样式允许你轻松地在组件上创建类似 CSS 的简单样式，而无需使用单独的样式表。这使团队中的开发人员和设计人员可以轻松地更无缝地共享和更新样式。

内联样式是一种将样式属性添加到 HTML 元素的方法，方法是在标签旁边编写样式属性。内联样式允许你在 JavaScript 组件中添加 CSS 规则，这可以使样式更改更容易和更方便地实现。

在 react 中有许多不同的样式组件方式，包括：

内联 CSS

JS 中的 CSS

样式化的组件

CSS 模块等

React 应用程序中的内联样式

现代网络不仅仅是一堆文本和图像，它具有互动性和吸引力。现在，内联样式可以帮助你创建这些交互并以新的方式与你的访问者互动！

内联样式是一种使用样式属性将样式信息添加到 HTML 文档的方法。style 属性可以添加到任何 HTML 元素中，并将在文档头部中的内联样式表中呈现样式，然后再在文档中的任何其他内容之前呈现样式。

这意味着添加 HTML 元素的顺序无关紧要，内联样式表总是首先呈现。当你想要向元素添加少量属性，或者想要在不更改原始样式表的情况下覆盖页面上的现有样式时，内联样式很有用。

内联 CSS 允许你一次将独特的样式应用于一个 HTML 元素。通过使用 style 属性和其中定义的任何 CSS 属性，你可以将 CSS 分配给特定的 HTML 元素。

style 属性为元素指定内联样式并覆盖全局设置的任何样式，因为它具有最高的特异性。

了解更多

React 中设置内联样式：

• 将元素上的样式属性设置为对象。
• 设置特定的 CSS 属性和值来设置元素的样式。
• 例如，<div style={{backgroundColor: 'salmon', color: 'white'}}>。

const App=()=> {
  const stylesObj={
    backgroundColor: 'lime',
    color: 'white',
  };

  const elementWidth=150;

  return (
    <div>
      {/* ? 直接设置内联样式 */}
      <div style={{backgroundColor: 'salmon', color: 'white'}}>
        迹忆客
      </div>

      <br />

      {/* ? 使用对象变量设置内联样式 */}
      <div style={stylesObj}>迹忆客</div>

      <br />

      {/* ? 使用三元有条件地设置内联样式 */}
      <div
        style={{
          backgroundColor: 'hi'.length===2 ? 'violet' : 'mediumblue',
          color: 'hi'.length===2 ? 'white' : 'mediumpurple',
        }}
      >
        迹忆客
      </div>

      <br />

      {/* ? 设置内联样式将变量插入字符串 */}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        迹忆客
      </div>
    </div>
  );
};

export default App;

代码示例展示了在 React.js 中的元素上设置内联样式的多种方法。

第一个示例直接在元素上设置样式。

<div style={{backgroundColor: 'salmon', color: 'white'}}>
  迹忆客
</div>

请注意，在样式对象上设置时，像 background-color 这样的多词属性是驼峰式的。

style 属性的值包含在 2 组花括号中。

内联样式中的第一组花括号标记表达式的开始，第二组花括号是包含样式和值的对象。

第二个示例将样式对象提取到变量中。

const App=()=> {
  const stylesObj={
    backgroundColor: 'lime',
    color: 'white',
  };

  return (
    <div>
      {/* ? 使用对象变量设置内联样式 */}
      <div style={stylesObj}>迹忆客</div>
    </div>
  );
};

export default App;

当我们有多个共享相同样式的元素时，您可以使用此方法。

我们还可以使用三元运算符有条件地在 React 中设置内联样式。

<div
  style={{
    backgroundColor: 'hi'.length===2 ? 'violet' : 'mediumblue',
    color: 'hi'.length===2 ? 'white' : 'mediumpurple',
  }}
>
  迹忆客
</div>

三元运算符与 if/else 语句非常相似。

问号之前的部分被评估，如果它返回一个真值，则运算符返回冒号之前的值，否则返回冒号之后的值。

示例中的三元运算符检查字符串 hi 的长度是否等于 2，如果是，则为 backgroundColor 属性返回字符串紫罗兰色，否则返回 mediumblue。

在设置内联样式时，我们还可以使用字符串插入表达式或变量。

const App=()=> {
  const elementWidth=150;

  return (
    <div>
      {/* ? 设置内联样式将变量插入字符串 */}
      <div
        style={{
          width: `${elementWidth}px`,
          backgroundColor: 'salmon',
          color: 'white',
        }}
      >
        迹忆客
      </div>
    </div>
  );
};

export default App;

在设置样式时，我们使用模板文字来连接字符串和变量。

div 元素的 width 属性设置为 150px。

美元符号和花括号语法允许我们使用被评估的占位符。

React 中常用的模式是提取具有预定义样式的包装器组件，这些样式呈现其子属性。

function BoldText({children}) {
  return <span style={{fontWeight: 'bold'}}>{children}</span>;
}

const App=()=> {
  return (
    <div>
      <p>
        Hello <BoldText>World</BoldText>
      </p>
    </div>
  );
};

export default App;

这是一个非常简单的例子，但是 BoldText 组件在元素上设置了一些样式并渲染了它的 children 属性。

这种方法通常用于定义具有通常重用样式的包装器组件。

在 React 中编写内联样式的另一种方法是将样式写入扩展名为 .css 的文件中。

.bg-salmon {
  background-color: salmon;
}

.text-white {
  color: white;
}

.font-lg {
  font-size: 2rem;
  padding: 10px 10px;
}

下面是我们如何导入和使用这些类。

// ? import css file
import './App.css';

const App=()=> {
  return (
    <div>
      <p className="bg-salmon text-white font-lg">hello world</p>
    </div>
  );
};

export default App;

在 React 中导入全局 CSS 文件时，最好将 CSS 文件导入 index.js 文件。

index.js 文件是你的 React 应用程序的入口点，所以它总是会被运行。

另一方面，如果我们将 CSS 文件导入组件，则在卸载组件后，CSS 样式可能会被删除。