Module 02 · Understanding Function Components with Array and DOM Manipulation函数组件、数组与 DOM 操作
Style in ReactReact 中的样式
预计所需时间： 3 分钟
在 React 中，可以通过多种方式设置样式，包括内联样式（inline styles）、CSS 模块（CSS modules）、样式化组件（styled components）等。下面简要了解各个方法。
目标
完成本次阅读后，你将能够：
- 探索 React 中的各种样式设置方式
内联样式
import React from 'react';
function MyComponent() {
return (
<div style={{ backgroundColor: 'lightblue', padding: '20px', borderRadius: '5px' }}>
<p style={{ color: 'white', fontSize: '18px' }}>This is a paragraph with inline styles.</p>
</div>
);
}
export default MyComponent;
<div>元素通过 style 属性直接应用内联样式。- 样式以 JavaScript 对象的形式指定，其中键是 CSS 属性名，值是相应的 CSS 属性值。
- 同样，
<div>内的<p>元素也通过 style 属性应用内联样式。 - 上述组件将渲染一个带有浅蓝色背景、内边距和圆角的
<div>。<div>内有一个文字为白色、字号为 18 像素的<p>元素，这些样式均通过内联样式设置。
CSS 模块
toggleMessage.module.css：
.message {
display: block;
color: green;
font-size: 18px;
margin-top: 10px;
}
ToggleMessage.js：
import React, { useState } from 'react';
import styles from './toggleMessage.module.css';
function ToggleMessage() {
const [isVisible, setIsVisible] = useState(true);
const toggleVisibility = () => {
setIsVisible(!isVisible);
};
return (
<div>
<h2>Toggle Message</h2>
<button onClick={toggleVisibility}>
{isVisible ? 'Hide Message' : 'Show Message'}
</button>
<p className={isVisible ? styles.message : ''}>This is a hidden message.</p>
</div>
);
}
export default ToggleMessage;
- 从
./toggleMessage.module.css导入样式：这会将 CSS 模块toggleMessage.module.css作为名为 styles 的对象导入。在 CSS 中，模块通常指一个文件（通常以a.module.css为扩展名），其中包含一组作用于应用中特定组件或模块的 CSS 规则。这些 CSS 规则具有局部作用域，可以防止组件之间发生意外的样式冲突。 const [isVisible, setIsVisible] = useState(true);：使用useState钩子初始化状态变量isVisible。它表示消息段落是否应该可见，默认值为 true。const toggleVisibility = () => {...};：这个函数在按钮被点击时更新状态变量isVisible，从而切换消息段落的可见性。<p className={isVisible ? styles.message : ''}>This is a hidden message.</p>：此段落元素用于显示消息。它的类名根据isVisible的值有条件地设置。如果isVisible为 true，就应用 CSS 模块中的 message 类；否则应用空字符串，相当于移除所有额外样式。
样式化组件
还可以使用 JavaScript 对象在 React 组件中应用 CSS，类似于所给 React 组件中的 messageStyle 对象。这种方法也称为内联样式。
例如，下面的代码包含一个名为 messageStyle 的对象，messageStyle { color: 'green', fontSize: '18px' } 表示颜色和字号的 CSS 属性。它还包含条件样式，例如 { display: isVisible ? 'block' : 'none' } 根据 isVisible 的值动态设置 display 属性。
import React, { useState } from 'react';
function ToggleMessage() {
const [isVisible, setIsVisible] = useState(true);
const toggleVisibility = () => {
setIsVisible(!isVisible);
};
const messageStyle = {
display: isVisible ? 'block' : 'none',
color: 'green',
fontSize: '18px',
marginTop: '10px'
};
return (
<div>
<h2>Toggle Message</h2>
<button onClick={toggleVisibility}>
{isVisible ? 'Hide Message' : 'Show Message'}
</button>
<p style={messageStyle}>This is a hidden message.</p>
</div>
);
}
作者
Richa Arora