ReactJS - 内联样式

更新于 2025/3/23 17:07:17

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 为每个组件提供了一个样式 props，可用于指定内联样式。内联样式应在 Javascript 对象中提供。对象应遵循以下规则，

对象键应为普通 CSS 属性的 CamelCased 版本。例如，background-color 应指定为 backgroundColor。

{
    backgroundColor: "red"
}

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

{
   fontSize: "12px"
}

React 将处理冲突并正确呈现应用程序。

应用内联样式

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

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

create-react-app myapp
cd myapp
npm start

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

// 删除 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;

这里我们有，