11、前端 React 样式设计的多种方法

前端 React 样式设计的多种方法

在前端开发中，为 React 应用设计样式是一项重要的任务。不同的样式设计方法各有优劣，下面我们将详细介绍几种常见的方法，并通过一个警报组件的示例来展示它们的使用。

1. 使用普通 CSS 为警报组件设计样式

首先，我们来看看如何使用普通 CSS 为警报组件设计样式。步骤如下：
1. 添加 CSS 文件 ：在 src 文件夹中添加一个名为 Alert.css 的文件，你可以从 GitHub 上复制该文件。
2. 定义容器类 ：在 Alert.css 中添加一个 container 类，代码如下：

.container {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid transparent;
}