Reactjs 中使用的最佳 CSS 框架

php中文网 2024-10-15 12:31:58

使用 react.js 构建应用程序时，选择正确的 css 框架可以显着提高您的工作效率并增强应用程序的用户界面。正确的 css 框架可以提供预构建的组件、实用程序和设计系统，使您的工作更快、更一致。下面，我将讨论一些与 react.js 无缝集成的最佳 css 框架，以及帮助您入门的示例和有用链接。

1. 顺风css

tailwind css 是一个实用程序优先的框架，允许您直接在 jsx 中构建自定义设计，而无需留下组件文件。它是高度可定制的，并鼓励您编写最少的自定义 css。

为什么使用 tailwind css？

基于实用程序的类：tailwind 提供了各种低级类，例如 flex、p-4、text-lg 等。
响应式设计：tailwind 内置响应式实用程序，可以更轻松地针对不同屏幕尺寸进行开发。
自定义：您可以修改tailwind.config.js文件中的默认主题以满足您的设计需求。

例子


<p>import react from 'react';</p>

<p>const app = () =&gt; {<br>
  return (<br></p><div classname="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4">
<br><div classname="text-center space-y-2">
<br><p classname="text-lg text-gray-900 font-semibold">welcome to tailwind css</p>
<br><p classname="text-gray-500">create custom designs using utility classes.</p>
<br>
</div>
<br>
</div><br>
  );<br>
};

<p>export default app;</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

资源：

tailwind css 官方网站
tailwind 与 react 设置指南

2. 引导

bootstrap 是一个著名的 css 框架，拥有大量预构建组件。对于寻求一致性、移动优先网格系统以及与现有设计轻松集成的开发人员来说，它非常适合。

为什么使用引导程序？

全面的 ui 组件：从按钮和模式到轮播和表单。
响应式网格系统：确保布局在所有设备上看起来都很棒。
强大的社区：庞大的生态系统和大量可用的主题。

示例（react-bootstrap）


<p>import react from 'react';<br>
import { button } from 'react-bootstrap';</p>

<p>const app = () =&gt; (<br><button variant="primary">click me</button><br>
);</p>

<p>export default app;</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

资源：

bootstrap 官方网站
react-bootstrap 文档

3. 材质 ui (mui)

material ui (mui) 实现了 google 的 material design 原则，并提供了广泛的可定制 react 组件。 mui 具有高度可定制性，非常适合创建现代、时尚的用户界面。

为什么使用 material ui？

material design 原则：google 的设计系统使应用程序看起来很现代。
可定制性：轻松修改主题、颜色和版式。
丰富的组件库：卡片、按钮、表单等组件。

例子


<p>import react from 'react';<br>
import { button } from '@mui/material';</p>

<p>const app = () =&gt; (<br><button variant="contained" color="primary"><br>
    material ui button<br></button><br>
);</p>

<p>export default app;</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

资源：

material ui 官方网站
material ui react 集成指南

4. 脉轮用户界面

chakra ui 提供简单、模块化且可访问的组件。它专注于开发人员体验，内置对浅色和深色模式的支持。样式是通过 props 而不是自定义 css 文件来实现的。

为什么使用 chakra 用户界面？

简单性：开发人员友好，具有易于使用的组件。
辅助功能：内置符合 wai-aria 标准。
主题：开箱即用地支持深色模式和浅色模式。

例子


<p>import react from 'react';<br>
import { button, chakraprovider } from '@chakra-ui/react';</p>

<p>const app = () =&gt; (<br><chakraprovider><br><button colorscheme="blue">chakra ui button</button><br></chakraprovider><br>
);</p>

<p>export default app;</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

资源：

chakra ui 官方网站
带有 react 设置的 chakra ui

5. 蚂蚁设计

ant design是一个全面的 ui 框架，为 react 应用程序，特别是企业级应用程序提供专业级组件。它有许多适合构建仪表板和管理面板的组件。

为什么使用 ant design？

企业焦点：非常适合大型应用程序和仪表板。
丰富的组件库：提供丰富的组件，从按钮到复杂的数据表格。
设计一致性：遵循稳健的设计理念。

例子


<p>import react from 'react';<br>
import { button } from 'antd';</p>

<p>const app = () =&gt; (<br><button type="primary">ant design button</button><br>
);</p>

<p>export default app;</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>

资源：

ant design 官方网站
ant design react 文档

6.布尔玛

bulma 是一个基于 flexbox 的现代 css 框架。它是轻量级的，提供简单、响应式的布局，没有 javascript 依赖的复杂性。

为什么使用布尔玛？

flexbox-first：使布局创建更容易、更快。
轻量级：没有javascript，只有纯css。
最少的设置：易于启动且可灵活定制。

例子


<p>import React from 'react';<br>
import 'bulma/css/bulma.css';</p>

<p>const App = () =&gt; (<br></p><div classname="section">
<br><button classname="button is-primary">Bulma Button</button><br>
</div><br>
);

<p>export default App;</p>