ReactJS - 内联样式

React 提供了一种独特的方式，可以直接在 React 组件中编写 CSS 并将其用于 JSX 中。这个概念称为 JS 中的 CSS，它比传统样式用法具有许多优势。

让我们学习什么是内联样式以及如何在 React 组件中使用它。

内联样式的概念

CSS 使开发人员能够设计 Web 应用程序的 UI。React 为 CSS 提供了第一类支持，并允许 CSS 直接导入到 React 应用程序中。将 CSS 直接导入 React 组件就像导入一个包一样简单。

import './App.css'

但是，将 CSS 直接导入 Web 组件有一个主要缺点，即 全局命名空间。如果类名冲突，全局样式可能会影响单个组件的样式。开发人员需要注意为类名分配一些前缀，以确保不会发生冲突。

另一种方法是允许 Javascript 管理 CSS，这称为 JS 中的 CSS。React 允许通过特殊的 CSS 语法在 JSX 中使用 CSS。React 为每个组件提供了一个 style 属性，可用于指定内联样式。内联样式应以 Javascript 对象的形式提供。该对象应遵循以下规则：

对象的键应该是普通 CSS 属性的驼峰式版本。例如，`background-color` 应指定为 `backgroundColor`。

{
   backgroundColor: "red"
}

对象的 value 应该是 CSS 中相应对象键的允许值之一，并且应该是字符串格式。例如，`font-size` CSS 属性及其值 (12px) 应如下指定：

{
   fontSize: "12px"
}

React 将处理冲突并正确渲染应用程序。

应用内联样式

在本节中，让我们学习如何在 React 应用程序中应用内联样式。

首先，使用以下命令创建一个新的 React 应用程序并启动它。

create-react-app myapp
cd myapp
npm start

接下来，打开 App.css (src/App.css) 并删除所有 CSS 类。

// remove the css

接下来，创建一个简单的组件，SimpleStyle (src/Components/SimpleIcon.js)，如下所示：

import React from "react";
class SimpleStyle extends React.Component {
   displayStyle = {
      fontFamily: 'Times New Roman',
      fontSize: "24px",
      color: "red"
   }
   render() {
      return (
         <div>
            <div style={this.displayStyle}>
               Sample text to understand inline style (object as variable) in React component
            </div>
            <hr />
            <div style={{ fontFamily: 'Arial', fontSize: "24px", color: "grey"}}>
               Sample text to understand inline style (object as expression) in React component
            </div>
         </div>
      )
   }
}
export default SimpleStyle

这里我们有：

使用变量 (displayStyle) 对第一个 div 进行样式设置。
使用表达式对第二个 div 进行样式设置。

接下来，打开 App 组件 (src/App.js) 并使用 SimpleStyle 组件更新内容，如下所示：

import './App.css'
import React from 'react';
import SimpleStyle from './Components/SimpleStyle'

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleStyle />
            </div>
         </div>
      </div>
   );
}
export default App;

这里我们有：

导入了 SimpleStyle 组件。
使用 SimpleStyle 组件来渲染日历图标。

最后，在浏览器中打开应用程序。内容将按如下所示呈现：

总结

内联样式帮助开发人员快速包含 CSS 样式，而无需担心 CSS 样式冲突。此外，语法与 CSS 非常相似，这使得开发人员可以轻松使用该功能而无需太多学习曲线。

打印页面