React CSS - REACT教程

首页 / 教程 / React 教程 / React CSS - REACT教程

React 使用 CSS 样式

在 React 应用程序中使用 CSS 有多种方法。

以下是一些常见的方式以及如何在 React 中实现这些方法的详细说明。

内联样式

在 React 中直接在元素内使用 CSS 样式是通过内联样式来实现的。

内联样式是将 CSS 样式直接作为一个对象传递给元素的 style 属性。每个样式属性都以驼峰命名法表示，而不是传统的 CSS 属性名称。

直接在元素内部使用：

示例代码 
importReact from'react';importReactDOM from'react-dom/client';constHeader=()=>{return(<><h1 style={{color:"red"}}>Hello Style!</h1><p>Add a little style!</p></>);}constroot=ReactDOM.createRoot(document.getElementById('root'));root.render(<Header/>);

您还可以创建一个具有样式信息的对象，并在样式属性中引用它：

示例代码 
importReact from'react';importReactDOM from'react-dom';constMyComponent=()=>{// 定义内联样式对象constcontainerStyle={padding:'20px',backgroundColor:'#f0f0f0'};consttitleStyle={fontSize:'24px',color:'#333'};return(<div style={containerStyle}><h1 style={titleStyle}>Hello,world!</h1></div>);};constroot=ReactDOM.createRoot(document.getElementById('root'));root.render(<MyComponent/>);

在上面的示例中，containerStyle 和 titleStyle 是两个内联样式对象，分别应用于 div 和 h1 元素。以下是关键点：

  • 使用驼峰命名法表示 CSS 属性（例如， backgroundColor 而不是 background-color ）。
  • 所有样式属性值都作为字符串传递（除了数字值可以直接使用，React 会自动添加单位）。

内联样式还可以根据组件的状态动态变化：

示例代码 
importReact,{useState}from'react';importReactDOM from'react-dom';constMyComponent=()=>{const[isHighlighted,setIsHighlighted]=useState(false);constcontainerStyle={padding:'20px',backgroundColor:isHighlighted?'#ffff99':'#f0f0f0'};consttitleStyle={fontSize:'24px',color:'#333'};return(<div style={containerStyle}><h1 style={titleStyle}>Hello,world!</h1><button onClick={()=>setIsHighlighted(!isHighlighted)}>Toggle Highlight</button></div>);};constroot=ReactDOM.createRoot(document.getElementById('root'));root.render(<MyComponent/>);

通过样式文件

您可以在单独的文件中编写 CSS 样式，只需使用 .css 文件扩展名保存该文件，然后将其导入您的应用程序即可。

创建一个名为 App.css 的样式文件，并加入以下 CSS 代码：

示例代码 
body{background-color:#282c34;color:white;padding:40px;font-family:Sans-Serif;text-align:center;}

在的应用程序中导入样式 App.css：

示例代码 
importReact from'react';importReactDOM from'react-dom/client';import'./App.css';constHeader=()=>{return(<><h1>Hello Style!</h1><p>Add a little style!.</p></>);}constroot=ReactDOM.createRoot(document.getElementById('root'));root.render(<Header/>);

CSS 模块

向应用程序添加样式的另一种方法是使用 CSS 模块。

CSS 模块是一种局部作用域的 CSS 文件命名规范，通过这种方法，CSS 类名和动画名称默认都作用于局部作用域。

CSS 模块对于放置在单独文件中的组件非常方便。

使用 .module.css 扩展名创建 CSS 模块，例如：MyComponent.module.css。

示例代码 
/* MyComponent.module.css */.container{padding:20px;background-color:#f0f0f0;}.title{font-size:24px;color:#333;}

在应用中导入样式表：

示例代码 
importReact from'react';importReactDOM from'react-dom';importstyles from'./MyComponent.module.css';constMyComponent=()=>{return(<div className={styles.container}><h1 className={styles.title}>Hello,world!</h1></div>);};constroot=ReactDOM.createRoot(document.getElementById('root'));root.render(<MyComponent/>);