React 使用 CSS 样式
在 React 应用程序中使用 CSS 有多种方法。
以下是一些常见的方式以及如何在 React 中实现这些方法的详细说明。
内联样式
在 React 中直接在元素内使用 CSS 样式是通过内联样式来实现的。
内联样式是将 CSS 样式直接作为一个对象传递给元素的 style 属性。每个样式属性都以驼峰命名法表示，而不是传统的 CSS 属性名称。
直接在元素内部使用：
实例
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
const Header = ( ) => {
return (
<>
<h1 style = { {color : "red" } } >Hello Style !</h1 >
<p >Add a little style !</p >
</>
) ;
}
const root = ReactDOM. createRoot (document. getElementById ( 'root' ) ) ;
root. render ( <Header /> ) ;
您还可以创建一个具有样式信息的对象，并在样式属性中引用它：
实例
import React from 'react' ;
import ReactDOM from 'react-dom' ;
const MyComponent = ( ) => {
// 定义内联样式对象
const containerStyle = {
padding : '20px' ,
backgroundColor : '#f0f0f0'
} ;
const titleStyle = {
fontSize : '24px' ,
color : '#333'
} ;
return (
<div style = {containerStyle } >
<h1 style = {titleStyle } >Hello , world !</h1 >
</div >
) ;
} ;
const root = ReactDOM. createRoot (document. getElementById ( 'root' ) ) ;
root. render ( <MyComponent /> ) ;
在上面的示例中，containerStyle 和 titleStyle 是两个内联样式对象，分别应用于 div 和 h1 元素。以下是关键点：
- 使用驼峰命名法表示 CSS 属性（例如，
backgroundColor 而不是 background-color）。
- 所有样式属性值都作为字符串传递（除了数字值可以直接使用，React 会自动添加单位）。
内联样式还可以根据组件的状态动态变化：
实例
import React , { useState } from 'react' ;
import ReactDOM from 'react-dom' ;
const MyComponent = ( ) => {
const [isHighlighted , setIsHighlighted ] = useState ( false ) ;
const containerStyle = {
padding : '20px' ,
backgroundColor : isHighlighted ? '#ffff99' : '#f0f0f0'
} ;
const titleStyle = {
fontSize : '24px' ,
color : '#333'
} ;
return (
<div style = {containerStyle } >
<h1 style = {titleStyle } >Hello , world !</h1 >
<button onClick = { ( ) => setIsHighlighted ( !isHighlighted ) } >
Toggle Highlight
</button >
</div >
) ;
} ;
const root = 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：
实例
import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './App.css' ;
const Header = ( ) => {
return (
<>
<h1 >Hello Style !</h1 >
<p >Add a little style !. </p >
</>
) ;
}
const root = 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 ;
}
在应用中导入样式表：
实例
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import styles from './MyComponent.module.css' ;
const MyComponent = ( ) => {
return (
<div className = {styles. container } >
<h1 className = {styles. title } >Hello , world !</h1 >
</div >
) ;
} ;
const root = ReactDOM. createRoot (document. getElementById ( 'root' ) ) ;
root. render ( <MyComponent /> ) ;