介绍
@thirdscope/styled-bulma 是基于 Bulma 的样式库封装，使得在 React 项目中使用 Bulma 样式更加方便。它提供了一系列 React 组件，同时兼容 styled-components 和 Emotion 方式进行样式处理。
安装
通过 npm 安装：
npm install --save @thirdscope/styled-bulma
使用方法
styled-components
在需要使用的组件中，使用 styled-components 的方式来扩展 @thirdscope/styled-bulma 自带的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------------------------
------ ------ ---- --------------------
----- ------------ - ---------------
-- -------- --
----------------- -----
--
------ ------- -------- ------- -
------ -
-----
---------------------
----------------------------------
------
--
-Emotion
在需要使用的组件中，使用 Emotion 的方式来扩展 @thirdscope/styled-bulma 自带的组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------------------------
------ - --- - ---- ----------------
----- ------------ - -- --------- -------- -- -- -
-------
---------
-- -------- --
----------------- -----
--
----------
-
----------
---------
--
------ ------- -------- ------- -
------ -
-----
---------------------
----------------------------------
------
--
-示例代码
可以通过以下示例代码来体验使用 @thirdscope/styled-bulma 的方式。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- -------- ------ - ---- ---------------------------
------ ------ ---- --------------------
------ - --- - ---- ----------------
----- ------------ - ---------------
----------------- -----
--
----- ------------------- - -- --------- -------- -- -- -
-------
---------
----------------- -----
--
----------
-
----------
---------
--
------ ------- -------- ------- -
------ -
-----------
---------
-------- ------------------------ -----
---
------------------------ --- ----- ---------- -----
----- ----- -------
----
---------------------
----------------------------------
---------------------------- ---------------------------
----------
------------
--
-结语
@thirdscope/styled-bulma 使得在 React 项目中使用 Bulma 样式更加方便。它提供了一系列 React 组件，同时兼容 styled-components 和 Emotion 方式进行样式处理。使用它可以更加高效地开发出美观的界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1e4d